feat: security page added (#148)

* feat: security page added

Changes made:

 * Header navigation modified
 * data sources added for the articles & partners (security folder)
 * dependencies updated

* style: articles

* style: meta tags updated

.nvmrc

@@ -1 +1 @@
-18.16.0
+18.16.0

package.json

@@ -63,29 +63,28 @@
     "react-scroll": "1.8.9"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.6.1",
-    "@commitlint/config-conventional": "17.6.1",
+    "@commitlint/cli": "17.6.5",
+    "@commitlint/config-conventional": "17.6.5",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.7",
-    "@semantic-release/release-notes-generator": "11.0.1",
+    "@semantic-release/github": "8.1.0",
+    "@semantic-release/release-notes-generator": "11.0.2",
     "@types/aos": "3.0.4",
     "@types/gtag.js": "0.0.12",
-    "@types/node": "18.16.3",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
     "@types/react-scroll": "1.8.7",
     "autoprefixer": "10.4.14",
     "cssnano": "6.0.1",
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.4",
+    "eslint": "8.41.0",
+    "eslint-config-next": "12.3.4",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
     "lint-staged": "13.2.2",
-    "postcss": "8.4.21",
+    "postcss": "8.4.24",
     "postcss-flexbugs-fixes": "5.0.2",
     "prettier": "2.8.8",
     "prettier-plugin-tailwindcss": "0.2.8",

src/components/Atom/QuoteIcon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function AtomQuoteIcon(props: any) {
+  return (
+    <svg aria-hidden="true" width={105} height={78} {...props}>
+      <path
+        d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z"/>
+    </svg>
+  );
+}

src/components/Block/Alliance.tsx

@@ -1,17 +1,12 @@
+import React, { MouseEvent } from "react";
+
 import Container from "@/components/Container";
 import AtomTitle from "@/components/Atom/Title";
-import React, { MouseEvent } from "react";
+import AtomQuoteIcon from "@/components/Atom/QuoteIcon";
+
 import { IoLogoTwitter } from "react-icons/io";
 import alliance from "@json/alliance.json";
 
-function QuoteIcon(props: any) {
-  return (
-    <svg aria-hidden="true" width={105} height={78} {...props}>
-      <path d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z" />
-    </svg>
-  );
-}
-
 export default function BlockAlliance() {
   const useOpen = (event: MouseEvent) => {
     const currentTarget = event.target as HTMLElement;
@@ -24,9 +19,11 @@ export default function BlockAlliance() {
     <section id="alliance" className="mt-8 bg-gradient-to-r from-pink-100 to-pink-300 py-16 pb-1 text-center dark:from-pink-600 dark:to-pink-900">
       <Container>
         <div className="mx-auto max-w-5xl text-slate-700 dark:text-zinc-100 md:text-center">
-          <div className="justify-center text-center mb-8 w-auto space-y-3" data-aos="fade-up" data-aos-delay="100">
+          <div className="mb-8 w-auto justify-center space-y-3 text-center" data-aos="fade-up" data-aos-delay="100">
             <h2 className="aos-init aos-animate text-center text-2xl font-extrabold tracking-tight md:max-w-full md:text-3xl" data-aos="slide-up">
-              <span className="relative -mb-1 block bg-gradient-to-r dark:from-pink-100 dark:to-pink-300 from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent">4626 Alliance</span>
+              <span className="relative -mb-1 block bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text pb-1 text-transparent dark:from-pink-100 dark:to-pink-300">
+                4626 Alliance
+              </span>
             </h2>
           </div>
           <p className="mu-4 text-xl leading-relaxed">
@@ -47,7 +44,7 @@ export default function BlockAlliance() {
                 onClick={useOpen}
               >
                 <figure className="flex flex-col items-stretch">
-                  <QuoteIcon className="absolute left-6 top-6 fill-pink-100/40 group-hover:fill-white/70 dark:fill-pink-50/5" />
+                  <AtomQuoteIcon className="absolute left-6 top-6 fill-pink-100/40 group-hover:fill-white/70 dark:fill-pink-50/5" />
                   <blockquote className="relative mb-6">
                     <p className="text-right text-lg text-slate-700 dark:text-zinc-100">{singleAllie.content}</p>
                   </blockquote>

src/components/Block/Security/Articles.tsx

@@ -0,0 +1,38 @@
+import { IoMdDocument } from "react-icons/io";
+import React from "react";
+import resources from "@json/security/articles.json";
+import AtomTitle from "@/components/Atom/Title";
+import Container from "@/components/Container";
+
+export default function BlockSecurityArticles() {
+  return (
+    <Container>
+      <AtomTitle alignText="center" subtitle="Articles, blogposts and last but not least audits for the ERC-4626">
+        ERC-4626 Security Resources
+      </AtomTitle>
+      <ul
+        role="list"
+        className="mx-auto mb-8 grid max-w-2xl cursor-default select-none grid-cols-1 gap-6 text-left text-sm text-pink-700 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
+      >
+        {resources.map((resource, index) => (
+          <a
+            key={`pinned-resource-${index}`}
+            href={resource.href}
+            target="_blank"
+            rel="nofollow noreferrer"
+            className="rounded-lg bg-white p-8 text-slate-700 shadow-xl shadow-slate-900/10 dark:bg-pink-700 dark:text-white lg:hover:bg-white/70 dark:lg:hover:bg-pink-700/70"
+          >
+            <div className="flex flex-nowrap justify-between">
+              <IoMdDocument className="h-8 w-8" />
+              <small>Created by {resource.creator}</small>
+            </div>
+            <h3 className="mt-3 whitespace-nowrap bg-gradient-to-r from-pink-400 to-pink-900 bg-clip-text text-lg font-extrabold capitalize tracking-tight text-transparent dark:from-pink-50 dark:to-pink-300">
+              {resource.title}
+            </h3>
+            <p className="mt-2 leading-relaxed dark:text-white">{resource.description}</p>
+          </a>
+        ))}
+      </ul>
+    </Container>
+  );
+}

src/components/Block/Security/Partners.tsx

@@ -0,0 +1,63 @@
+import React, { MouseEvent } from "react";
+import { IoLogoTwitter } from "react-icons/io";
+import alliance from "@json/security/partners.json";
+import AtomQuoteIcon from "@/components/Atom/QuoteIcon";
+
+export default function BlockSecurityPartners() {
+  const useOpen = (event: MouseEvent) => {
+    const currentTarget = event.target as HTMLElement;
+    if (!currentTarget.closest("a")) {
+      window.open(currentTarget.closest("li")?.dataset.url, "_blank");
+    }
+  };
+
+  return (
+    <ul role="list" className="mx-auto my-16 grid grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-2">
+      {alliance
+        .sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1))
+        .map((singleAllie, singleAllieIndex) => (
+          <li
+            data-url={singleAllie.website}
+            key={singleAllieIndex}
+            className="relative flex cursor-pointer select-none rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10 transition-colors delay-75 ease-linear dark:bg-zinc-700 md:hover:bg-white/60 dark:md:hover:bg-zinc-700/50"
+            onClick={useOpen}
+          >
+            <figure className="flex flex-col items-stretch">
+              <AtomQuoteIcon className="absolute left-6 top-6 fill-pink-100/40 group-hover:fill-white/70 dark:fill-pink-50/5" />
+              <blockquote className="relative mb-6 pl-[50px] pt-[25px]">
+                <p className="text-right text-lg text-slate-700 dark:text-zinc-100">{singleAllie.content}</p>
+              </blockquote>
+              <figcaption className="relative mt-auto flex items-center justify-between border-t-[0.5px] border-pink-200 pt-6 text-left">
+                <div>
+                  <a
+                    rel="noreferrer"
+                    href={singleAllie.website}
+                    target="_blank"
+                    className="mt-3 flex items-center whitespace-nowrap bg-gradient-to-r from-pink-500 to-pink-900 bg-clip-text text-xl font-extrabold uppercase tracking-tight text-transparent transition-all delay-75 ease-linear dark:from-pink-50 dark:to-pink-300 lg:hover:from-pink-700 lg:hover:to-pink-900 lg:hover:dark:from-pink-400 lg:hover:dark:to-pink-600"
+                  >
+                    {singleAllie.name}
+                  </a>
+                  <a
+                    href={`https://twitter.com/${singleAllie.twitter}`}
+                    target="_blank"
+                    className="group inline-flex items-center space-x-1.5 font-semibold text-pink-700 underline decoration-from-font underline-offset-4 dark:text-pink-100 md:space-x-2 md:no-underline md:hover:text-pink-700 md:hover:underline"
+                    rel="noreferrer"
+                  >
+                    <small className="font-mono lowercase tracking-tight">follow on</small> <IoLogoTwitter className="h-[20px] w-auto md:opacity-25 md:group-hover:opacity-100" />
+                  </a>
+                </div>
+                <a
+                  rel="noreferrer"
+                  href={singleAllie.website}
+                  target="_blank"
+                  className="inline-flex overflow-hidden rounded-full bg-slate-50/40 p-[5px] shadow-md shadow-slate-900/20 dark:bg-slate-100"
+                >
+                  <img className="h-14 w-14 rounded-full object-contain" src={`/content/images/security-partners/${singleAllie.logo}`} alt={singleAllie.name} width={70} height={70} />
+                </a>
+              </figcaption>
+            </figure>
+          </li>
+        ))}
+    </ul>
+  );
+}

src/components/Header.tsx

@@ -12,6 +12,7 @@ import {useTheme} from "next-themes";
 const navigation = [
   { title: "Home", href: "/" },
   { title: "News", href: "/news" },
+  { title: "Security", href: "/security" },
   { title: "Vaults", href: "/vaults" },
   { title: "Resources", href: "/resources" },
   { title: "Bounties", section: "bounties", href: "/#bounties", isScroll: true, offset: -90, featured: true },

src/content/security/articles.json

@@ -0,0 +1,38 @@
+[
+  {
+    "creator": "OpenZeppelin",
+    "title": "OpenZeppelin 4626 Overview",
+    "description": "We provide a base implementation of ERC4626 that includes a simple vault. This contract is designed in a way that allows developers to easily re-configure the vault’s behavior, with minimal overrides, while staying compliant. In this guide, we will discuss some security considerations that affect ERC4626. We will also discuss common customizations of the vault.",
+    "href": "https://docs.openzeppelin.com/contracts/4.x/erc4626"
+  },
+  {
+    "title": "OpenZeppelin Contracts v4.9",
+    "creator": "OpenZeppelin",
+    "href": "https://blog.openzeppelin.com/introducing-openzeppelin-contracts-v4.9",
+    "description": "OpenZeppelin Contracts is considered the gold-standard open-source library for secure smart contract development since 2016. As our 75th release and the most heavily tested ever, Contracts v4.9 further empowers Web3 projects to reduce risk and increase productivity through standardized, battle-tested, and community-reviewed code."
+  },
+  {
+    "title": "OpenZeppelin Pods Finance ERC-4626 Audit 1",
+    "creator": "OpenZeppelin",
+    "description": "The Pods Yield Vault is a one-click deposit investment product that features an options strategy to generate principal-protected returns when the ETH market is volatile. We audited the pods-finance/yield-contracts repository at the v2.0.0 (committed on 09/20/2020)",
+    "href": "https://blog.openzeppelin.com/pods-finance-ethereum-volatility-vault-audit-1"
+  },
+  {
+    "title": "OpenZeppelin Pods Finance ERC-4626 Audit 2",
+    "creator": "OpenZeppelin",
+    "description": "It's an update from Audit 1: A number of critical and high severity issues were found during the first audit of Pods Finance’s contracts. As a result, architectural changes were made to the contracts. This necessitated a second audit in order to fully evaluate the new architectural changes and re-evaluate existing code.",
+    "href": "https://blog.openzeppelin.com/pods-finance-ethereum-volatility-vault-audit-2"
+  },
+  {
+    "title": "Zellic Midas Capital ERC-4626 Audit:",
+    "creator": "Zellic",
+    "description": "Midas Team approached researchers at Zellic, to review our contracts, oracles, and the pools created for our future allies. Zellic conducted the audit within the two weeks period, the article is a quick look at the audit findings. Detailed report link is included as well.",
+    "href": "https://medium.com/midas-capital/audit-with-zellic-29b63f1be25a"
+  },
+  {
+    "title": "Exploring ERC-4626: A Security Primer",
+    "creator": "Zellic",
+    "description": "ERC-4626 is a standard for tokenized vaults. Before the introduction of ERC-4626, every vault had its own distinctive specification and implementation details. This made integration difficult, error prone, and wasteful. ERC-4626 attempts to solve this problem by introducing a standard specification to lower integration efforts and create more consistent and robust implementation patterns, just like ERC-20.",
+    "href": "https://www.zellic.io/blog/exploring-erc-4626"
+  }
+]

src/content/security/partners.json

@@ -0,0 +1,16 @@
+[
+  {
+    "content": "Zellic, known for its expertise in ERC-4626 and other smart contract audits, identified serious vulnerabilities in 55% of their 2022 projects. Leveraging competitive hacking skills, they provide trusted and comprehensive security solutions for EVM, Move, Cosmos, and Solana protocols.",
+    "name": "Zellic",
+    "website": "https://www.zellic.io/",
+    "twitter": "zellic_io",
+    "logo": "zellic.png"
+  },
+  {
+    "content": "OpenZeppelin is a robust library for Ethereum-based smart contracts that includes an implementation of ERC-4626. It offers industry-standard implementations coupled with thorough security measures. An indispensable toolkit for developers, OpenZeppelin facilitates the creation of scalable, secure decentralized applications.",
+    "name": "OpenZeppelin",
+    "website": "https://openzeppelin.com",
+    "twitter": "OpenZeppelin",
+    "logo": "open-zeppelin.png"
+  }
+]

src/pages/resources.tsx

@@ -9,7 +9,7 @@ import BlockAuthors from "@/components/Block/Authors";
 import BlockVideos from "@/components/Block/Videos";
 import BlockStandard from "@/components/Block/Standard";
 
-export default function VaultsPage() {
+export default function ResourcesPage() {
   const config = getConfig("ERC-4626 Resources", "Resources to help aid in the development of ERC 4626 vaults.");
   return (
     <>

src/pages/security.tsx

@@ -0,0 +1,35 @@
+import Layout from "@/components/Layout";
+
+import getConfig from "@/helpers/config";
+import { DefaultSeo } from "next-seo";
+import Head from "next/head";
+import BlockSecurityPartners from "@/components/Block/Security/Partners";
+import BlockSecurityArticles from "@/components/Block/Security/Articles";
+import AtomTitle from "@/components/Atom/Title";
+import React from "react";
+import Container from "@/components/Container";
+
+export default function SecurityPage() {
+  const config = getConfig("ERC-4626 Security", "Security partners of the ERC-4626 Alliance and audits of the ERC-4626 standard");
+  return (
+    <>
+      <DefaultSeo openGraph={config.openGraph} twitter={config.twitter} />
+      <Head>
+        <title>{config.openGraph?.title}</title>
+      </Head>
+      <Layout>
+        <div className="uiBlock mediumBackground" id="security-partners">
+          <Container>
+            <AtomTitle alignText="center" subtitle="Security Partners of the ERC-4626 Alliance">
+              ERC-4626 Security
+            </AtomTitle>
+            <BlockSecurityPartners />
+          </Container>
+        </div>
+        <div className="uiBlock lightBackground" id="security-content">
+          <BlockSecurityArticles />
+        </div>
+      </Layout>
+    </>
+  );
+}