chore: implement session card part of the front page

Author: epiqueras

.eslintrc.js

@@ -342,6 +342,7 @@ module.exports = {
   settings: {
     "import/resolver": {
       alias: [
+        ["icons", "./icons"],
         ["_pages", "./_pages"],
         ["subgraph", "./subgraph"],
       ],

README.md

@@ -1,6 +1,7 @@
 ## (2021-01-25)
 
 - chore: build subgraph schema ([9810923](https://github.com/kleros/governor-web/commit/9810923))
+- chore: fix subgraph bugs ([767545d](https://github.com/kleros/governor-web/commit/767545d))
 - chore: generate first changelog ([2e41de7](https://github.com/kleros/governor-web/commit/2e41de7))
 - chore: map appeal funding in subgraph ([990a87d](https://github.com/kleros/governor-web/commit/990a87d))
 - chore: map governance functions in subgraph ([360d007](https://github.com/kleros/governor-web/commit/360d007))

_pages/index/index.js

@@ -1,13 +1,22 @@
+import { useQuery } from "@kleros/components";
 import { graphql } from "relay-hooks";
 
+import SessionCard from "./session-card";
+
 export default function Index() {
-  return "Index";
+  const { props } = useQuery();
+  return (
+    <SessionCard contract={props?.contract} session={props?.sessions?.[0]} />
+  );
 }
 
 export const indexQuery = graphql`
   query indexQuery {
     contract(id: 0) {
-      id
+      ...sessionCardContract
+    }
+    sessions(orderBy: creationTime, orderDirection: desc, first: 1) {
+      ...sessionCardSession
     }
   }
 `;

_pages/index/session-card.js

@@ -0,0 +1,68 @@
+import { Box, Card, Link, Text } from "@kleros/components";
+import { graphql, useFragment } from "relay-hooks";
+
+const sessionCardFragments = {
+  contract: graphql`
+    fragment sessionCardContract on Contract {
+      submissionTimeout
+      lastApprovalTime
+    }
+  `,
+  session: graphql`
+    fragment sessionCardSession on Session {
+      durationOffset
+    }
+  `,
+};
+export default function SessionCard({ contract, session }) {
+  const { lastApprovalTime, submissionTimeout } =
+    useFragment(sessionCardFragments.contract, contract) || {};
+  const { durationOffset } =
+    useFragment(sessionCardFragments.session, session) || {};
+  const sessionStart = lastApprovalTime && new Date(lastApprovalTime * 1000);
+  const sessionEnd =
+    lastApprovalTime &&
+    submissionTimeout &&
+    durationOffset &&
+    new Date(
+      (Number(lastApprovalTime) +
+        Number(submissionTimeout) +
+        Number(durationOffset)) *
+        1000
+    );
+  return (
+    <Card
+      variant="muted"
+      sx={{
+        borderTopColor: "primary",
+        borderTopStyle: "solid",
+        borderTopWidth: 2,
+      }}
+      mainSx={{
+        color: "accent",
+        justifyContent: "space-between",
+        padding: 1,
+      }}
+    >
+      <Box>
+        <Text>
+          Governor decisions from{" "}
+          <Link newTab href="https://snapshot.page/#/kleros">
+            Snapshot.
+          </Link>
+        </Text>
+        <Text>
+          <Text as="span" sx={{ fontWeight: "bold" }}>
+            Session:
+          </Text>{" "}
+          Votes approved before{" "}
+          <Text as="span">{sessionStart?.toLocaleString()}</Text>
+        </Text>
+      </Box>
+      <Box sx={{ textAlign: "center" }}>
+        <Text>Session ends</Text>
+        <Text sx={{ fontWeight: "bold" }}>{sessionEnd?.toLocaleString()}</Text>
+      </Box>
+    </Card>
+  );
+}

icons/index.js

@@ -0,0 +1,2 @@
+export { default as WhiteKlerosLogo } from "./white-kleros-logo";
+export { default as WhiteSecuredByKleros } from "./white-secured-by-kleros";

icons/white-kleros-logo.js

@@ -0,0 +1,32 @@
+import { SVG } from "@kleros/components";
+
+export default function WhiteKlerosLogo(props) {
+  return (
+    <SVG viewBox="0 0 148 49" {...props}>
+      <g clipPath="url(#clip0)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M66.813 24.9095H66.1854V19.3144H64.5029V32.4443H66.1854V26.295H66.763L72.0608 32.7721L73.3414 31.6884L68.2441 25.5142L72.5882 19.9951L71.3074 18.9873L66.813 24.9095ZM81.4521 19.3141H79.7699V32.444H88.307V30.9319H81.4521V19.3141ZM94.5096 19.3141H102.67V20.8264H96.1917V24.7576H101.54V26.2695H96.1917V30.9318H102.67V32.4439H94.5096V19.3141ZM113.819 19.3141H109.375V32.444H111.057V26.8241H113.493L116.832 32.7718L118.289 31.8898L115.075 26.572C116.657 26.0933 117.736 24.5056 117.736 22.8929C117.736 20.3474 116.004 19.3141 113.819 19.3141ZM115.978 22.8927C115.978 24.3795 114.899 25.312 113.267 25.312H111.057V20.8264H113.769C115.276 20.8264 115.978 21.7084 115.978 22.8927ZM132.878 25.892C132.878 26.9503 132.802 32.6711 128.232 32.6711C126.123 32.6711 123.587 31.159 123.587 25.892C123.587 20.65 126.073 19.0876 128.232 19.0876C130.316 19.0876 132.878 20.5996 132.878 25.892ZM125.345 25.892C125.345 27.8072 125.696 31.0833 128.232 31.0833C130.769 31.0833 131.12 27.8072 131.12 25.892C131.12 23.9512 130.768 20.6754 128.232 20.6754C125.696 20.6752 125.345 23.9512 125.345 25.892ZM143.424 31.0833C141.666 31.0833 140.888 29.8988 140.562 28.2861L139.055 28.7648C139.457 31.1085 140.989 32.6711 143.424 32.6711C145.835 32.6711 147.567 31.2598 147.567 28.7648C147.567 27.4039 146.94 26.3455 145.759 25.6903L142.972 24.4555C141.968 24.0019 141.215 23.649 141.215 22.4142C141.215 21.2296 142.269 20.6754 143.349 20.6754C144.78 20.6754 145.458 21.5824 145.759 22.8677L147.366 22.389C146.839 20.3476 145.559 19.0876 143.374 19.0876C141.315 19.0876 139.532 20.3224 139.532 22.5401C139.532 24.7927 141.036 25.4102 142.749 26.1132C142.914 26.1809 143.081 26.2494 143.248 26.3202C143.353 26.3635 143.458 26.406 143.563 26.4483C144.742 26.9236 145.885 27.3847 145.885 28.8657C145.885 30.3273 144.805 31.0833 143.424 31.0833Z"
+          fill="white"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.6356 1.5L42.4109 2.69704L53.2512 26.788L37.9576 48.8055L11.0367 47.0812L0 20.9788L15.6356 1.5ZM35.2655 15.3866L15.8604 23.8666L32.4506 36.6964L35.2655 15.3866ZM33.0188 11.1374L17.511 4.45872L14.2534 18.5009L33.0188 11.1374ZM29.0882 39.9245L12.2342 27.8872L12.6418 44.1985L29.0882 39.9245ZM50.5592 26.7349L39.0741 15.0781L36.0427 37.4936L50.5592 26.7349ZM33.0397 42.5464L18.8256 46.2623L35.5413 47.3329L33.0397 42.5464ZM48.3148 32.0236L35.8723 41.2944L38.3447 46.1271L48.3148 32.0236ZM42.4294 6.06301L40.0127 11.0252L49.008 20.1709L42.4294 6.06301ZM39.4184 3.68844L23.6224 3.04712L36.6522 8.74748L39.4184 3.68844ZM13.3289 5.98314L2.26489 19.9568L9.66208 21.524L13.3289 5.98314ZM9.21605 24.2651L1.78321 22.6911L9.5388 40.966L9.21605 24.2651Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect
+            width={148}
+            height={48}
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </SVG>
+  );
+}

icons/white-secured-by-kleros.js

@@ -72,7 +72,7 @@
     }
   },
   "scripts": {
-    "depcheck": "depcheck . --ignores=_pages,subgraph,eslint-import-resolver-alias,@commitlint/cli,@commitlint/config-conventional,electron",
+    "depcheck": "depcheck . --ignores=icons,_pages,subgraph,eslint-import-resolver-alias,@commitlint/cli,@commitlint/config-conventional,electron,@kleros/icons",
     "lint": "eslint .",
     "dev": "next",
     "dev:relay": "get-graphql-schema https://api.thegraph.com/subgraphs/name/epiqueras/governor-kovan > subgraph/build/full-schema.graphql && get-graphql-schema https://api.thegraph.com/subgraphs/name/epiqueras/governor-kovan --json | node subgraph/eslint-compat.js > subgraph/build/full-schema.json && relay-compiler --watch",

package.json

@@ -6,19 +6,18 @@ import {
   NextLink,
   RelayProvider,
   SocialIcons,
-  Text,
   ThemeProvider,
   Web3Provider,
   AccountSettingsPopup as _AccountSettingsPopup,
   createWrapConnection,
   klerosTheme,
 } from "@kleros/components";
-import { SecuredByKleros } from "@kleros/icons";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { animated, useTransition } from "react-spring";
 
 import { indexQuery } from "_pages/index";
+import { WhiteKlerosLogo, WhiteSecuredByKleros } from "icons";
 import Governor from "subgraph/abis/governor";
 import { address } from "subgraph/config/kovan";
 
@@ -70,15 +69,19 @@ const header = {
   left: (
     <NextLink href="/">
       <Link variant="unstyled" sx={{ marginLeft: 1 }}>
-        <Text>KLEROS</Text>
-        <Text>GOVERNOR</Text>
+        <WhiteKlerosLogo height={49} width={148} />
       </Link>
     </NextLink>
   ),
+  middle: (
+    <NextLink href="/">
+      <Link variant="unstyled">Governor</Link>
+    </NextLink>
+  ),
   right: <AccountSettingsPopup />,
 };
 const footer = {
-  left: <SecuredByKleros width={100} />,
+  left: <WhiteSecuredByKleros height={24} width={130} />,
   right: <SocialIcons />,
 };
 const AnimatedBox = animated(Box);