chore: add identicons

README.md

@@ -1,4 +1,4 @@
-## (2020-09-29)
+## (2020-09-30)
 
 - chore: add code of conduct ([6859555](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/6859555))
 - chore: add issue templates ([6adcbee](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/6adcbee))
@@ -52,6 +52,7 @@
 - chore: set up CI ([72e9f6e](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/72e9f6e))
 - chore: set up project ([534bf60](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/534bf60))
 - chore: show challenged status in profile header ([55aa602](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/55aa602))
+- chore: take into account renewal grace periods ([c45ec84](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/c45ec84))
 - chore: track governance changes in subgraph ([8ccb7e9](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/8ccb7e9))
 - chore: update changelog ([a45d269](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/a45d269))
 - chore: update eslint-plugin-regex ([2838bc3](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/2838bc3))

components/appeal.js

@@ -1,8 +1,10 @@
 import { useMemo } from "react";
+import { Box } from "theme-ui";
 
 import Card from "./card";
 import FundButton from "./fund-button";
 import Grid from "./grid";
+import Identicon from "./identicon";
 import { NextETHLink } from "./next-router";
 import Progress from "./progress";
 import Tabs, { Tab, TabList, TabPanel } from "./tabs";
@@ -23,11 +25,19 @@ function AppealTabPanelCard({
 }) {
   const { web3 } = useWeb3();
   const card = (
-    <Card mainSx={{ alignItems: "flex-start", flexDirection: "column" }}>
-      <NextETHLink address={address}>{address}</NextETHLink>
-      <Text sx={{ marginBottom: 3 }}>
-        {label && `Previous round ${label}.`}
-      </Text>
+    <Card
+      header={
+        <>
+          <Identicon address={address} />
+          <Box sx={{ marginLeft: 2 }}>
+            <NextETHLink address={address}>{address}</NextETHLink>
+            <Text>{label && `Previous round ${label}.`}</Text>
+          </Box>
+        </>
+      }
+      headerSx={{ justifyContent: "flex-start" }}
+      mainSx={{ alignItems: "flex-start", flexDirection: "column" }}
+    >
       <Text
         sx={{
           fontWeight: "bold",

components/identicon.js

@@ -0,0 +1,18 @@
+import ReactJazzicon, { jsNumberForAddress } from "react-jazzicon";
+import { Box } from "theme-ui";
+
+export default function Identicon({ diameter = 32, address, ...rest }) {
+  return (
+    <Box
+      as={(props) => (
+        <ReactJazzicon
+          diameter={diameter}
+          seed={jsNumberForAddress(address)}
+          {...rest}
+          {...props}
+        />
+      )}
+      {...rest}
+    />
+  );
+}

package.json

@@ -55,6 +55,7 @@
     "react-accessible-accordion": "^3.3.3",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.3",
+    "react-jazzicon": "^0.1.3",
     "react-loading-skeleton": "^2.1.1",
     "react-player": "^2.6.1",
     "react-relay-network-modern": "^4.7.4",