New Onboarding UI

.eslintrc.js

@@ -45,10 +45,10 @@ module.exports = {
   rules: {
     // Core
     "arrow-body-style": "error", // Don't use unnecessary curly braces for arrow functions.
-    "new-cap": "error", // Require constructor names to begin with a capital letter.
+    "new-cap": 0, // Require constructor names to begin with a capital letter.
     "new-parens": "error",
     "no-array-constructor": "error",
-    "no-console": "error",
+    "no-console": ["error", { allow: ["error"] }],
     "no-duplicate-imports": ["error", { includeExports: true }],
     "no-else-return": ["error", { allowElseIf: false }],
     "no-extra-bind": "error",
@@ -60,7 +60,8 @@ module.exports = {
     "no-shadow": "error",
     "no-unneeded-ternary": ["error", { defaultAssignment: false }],
     "no-unused-expressions": "error",
-    "no-use-before-define": "error",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
     "no-useless-computed-key": "error",
     "no-useless-concat": "error",
     "no-useless-constructor": "error",
@@ -79,7 +80,7 @@ module.exports = {
     "prefer-template": "error",
     "require-await": "error",
     "spaced-comment": "error",
-    curly: ["error", "multi"], // Don't use unnecessary curly braces.
+    curly: "error", // Don't use unnecessary curly braces.
     eqeqeq: "error",
     // Force the use of aliases for aliased modules.
     "no-restricted-imports": [
@@ -88,7 +89,6 @@ module.exports = {
         patterns: [
           "**/components",
           "!@kleros/components",
-          "**/icons",
           "!@kleros/icons",
           "..", // No relative parent imports.
           "theme-ui", // This should be internal to the design system.
@@ -119,6 +119,7 @@ module.exports = {
           "components/index.js",
           "components/.storybook/**",
           "components/*.stories.{js,mdx}",
+          "i18n",
         ],
       },
     ],
@@ -130,7 +131,10 @@ module.exports = {
           "next/*",
           "_pages/**",
           "assets/**",
+          "i18n/**",
           "lib/**",
+          "public/**",
+          "timeago.js/**",
           "subgraph/**",
           "react-player/lazy",
           "@storybook/addon-docs/blocks",
@@ -249,7 +253,6 @@ module.exports = {
           "dfn",
           "dialog",
           "dir",
-          "div",
           "dl",
           "dt",
           "em",
@@ -272,7 +275,6 @@ module.exports = {
           "header",
           "hr",
           "html",
-          "i",
           "iframe",
           "img",
           "input",
@@ -355,8 +357,6 @@ module.exports = {
       "error",
       [
         'import.*(/|\\.)";', // Don't use trailing slashes or cyclic index imports.
-        '"\\d+"', // Don't use numerical strings.
-        "[^\\d]0p[x]", // Don't use pixels unit for zero values.
         "(?=.*[A-F])#[0-9a-fA-F]{1,6}", // Don't use upper case letters in hex colors.
         "@js[x]", // Don't use a custom JSX pragma.
         "Style[d]", // Don't use "styled" components.
@@ -383,9 +383,12 @@ module.exports = {
         ["@kleros/components", "./components"],
         ["@kleros/icons", "./icons"],
         ["_pages", "./_pages"],
+        ["pages", "./pages"],
         ["assets", "./assets"],
         ["data", "./data"],
+        ["i18n", "./i18n"],
         ["lib", "./lib"],
+        ["public", "./public"],
         ["subgraph", "./subgraph"],
       ],
     },
@@ -402,7 +405,6 @@ module.exports = {
           {
             patterns: [
               "@kleros/components",
-              "**/icons",
               "!@kleros/icons",
               "..", // No relative parent imports.
             ],
@@ -419,7 +421,6 @@ module.exports = {
             patterns: [
               "**/components",
               "!@kleros/components",
-              "@kleros/icons",
               "..", // No relative parent imports.
               "theme-ui", // This should be internal to the design system.
               "next/link", // Use the custom version that maintains query parameters instead.
@@ -432,6 +433,7 @@ module.exports = {
     {
       files: [
         "./*.js",
+        "./*.json",
         "scripts/**.js",
         "subgraph/**.js",
         "components/.storybook/main.js",
@@ -470,6 +472,7 @@ module.exports = {
 
         "plugin:@typescript-eslint/recommended",
         // MDX Plugin
+        "plugin:import/typescript",
       ],
       plugins: ["@typescript-eslint"],
     },

.gitignore

@@ -24,4 +24,4 @@
 /assets/seed-submissions/
 
 .env
-.vercel
+.vercel

README.md

@@ -1,10 +1,8 @@
 # Proof of Humanity Dapp
 
-This is the Proof of Humanity web app you will find at [https://app.proofofhumanity.id](https://app.proofofhumanity.id).
+This is the Proof of Humanity web app maintained by the DAO that you will find at [https://proofofhumanity.org](https://proofofhumanity.org).
 
 ## Contributing
 
 Please see [CONTRIBUTING.md](./CONTRIBUTING.md).
 
-## Priority
-You can see which issues are a priority and help prioritize those using [tokenlog](https://tokenlog.xyz/proof-of-humanity/proof-of-humanity-web).

_pages/index/index.js

@@ -15,7 +15,9 @@ function getSubmissionCounter(
   nSubmissions,
   props
 ) {
-  if (searchFilter) return nSubmissions;
+  if (searchFilter) {
+    return nSubmissions;
+  }
   switch (statusFilter) {
     case "vouching":
       return props?.counter?.vouchingPhase || 0;
@@ -70,13 +72,13 @@ export default function Index() {
   return (
     <>
       <Head>
-        <title>Proof of Humanity</title>
+        <title>Proof of Humanity — Open & Democratic</title>
       </Head>
       <SubmissionFilters
         numberOfSubmissions={submissionCounter}
         submissionDuration={submissionDuration}
       />
-      <Grid sx={{ minHeight: 750 }} gap={2} columns={[1, 2, 3, 4]} rows={2}>
+      <Grid sx={{ minHeight: 652 }} gap={2} columns={[1, 2, 3, 4]} rows={2}>
         {submissions?.map((submission) => (
           <SubmissionCard
             key={submission.id}

_pages/index/submission-card.js

@@ -1,4 +1,5 @@
 import { Card, Image, NextLink, Text, useContract } from "@kleros/components";
+import { useTranslation } from "react-i18next";
 import { graphql, useFragment } from "relay-hooks";
 
 import { submissionStatusEnum, useEvidenceFile } from "data";
@@ -26,7 +27,34 @@ const submissionCardFragments = {
   `,
 };
 
+function statusColorCode(key) {
+  let color = "#fff";
+
+  switch (key) {
+    case "PendingRegistration":
+    case "PendingRemoval":
+      color = "#fbb630";
+      break;
+    case "Vouching":
+      color = "#ff81b7";
+      break;
+    case "ChallengedRegistration":
+    case "ChallengedRemoval":
+    case "Expired":
+      color = "#ff006d";
+      break;
+    case "Registered":
+      color = "#91ff81";
+      break;
+    default:
+  }
+
+  return `0px -1px 0px ${color}`;
+}
+
 export default function SubmissionCard({ submission }) {
+  const { t } = useTranslation();
+
   const {
     submissionTime,
     requests: [request],
@@ -38,6 +66,7 @@ export default function SubmissionCard({ submission }) {
     "proofOfHumanity",
     "submissionDuration"
   );
+
   const status = submissionStatusEnum.parse({
     ...rest,
     submissionTime,
@@ -48,29 +77,50 @@ export default function SubmissionCard({ submission }) {
     status === submissionStatusEnum.Registered &&
     Date.now() / 1000 - submissionTime > submissionDuration;
   const evidence = useEvidenceFile()(request.evidence[0].URI);
+
   return (
     <NextLink href="/profile/[id]" as={`/profile/${id}`}>
       <Card
         as="a"
-        sx={{ height: 367, color: "text" }}
+        sx={{
+          height: 326,
+          color: "text",
+          boxShadow: statusColorCode(status.key),
+        }}
         css={{ textDecoration: "none" }}
+        className="poh-nft"
         header={
           <>
-            <status.Icon
+            <Image
+              src="/images/eth.svg"
+              crossOrigin="anonymous"
+              alt={t(`chain_Mainnet`)}
               sx={{
-                stroke: status.camelCase,
-                path: { fill: status.camelCase },
+                objectFit: "contain",
+                height: "20px",
               }}
             />
-            <Text>
-              {status.startCase}
-              {isExpired && " (Expired)"}
+            <Text
+              sx={{
+                fontSize: "13px",
+              }}
+            >
+              {t(`profile_status_${status.key}`)}
+              {isExpired && ` (${t("profile_status_Expired")})`}
             </Text>
           </>
         }
         mainSx={{ flexDirection: "column" }}
       >
-        <Image variant="avatar" src={evidence?.file?.photo} />
+        <Image
+          crossOrigin="anonymous"
+          variant="avatar"
+          src={evidence?.file?.photo}
+          sx={{
+            marginTop: "-10px",
+            marginBottom: "10px",
+          }}
+        />
         <Text
           sx={{
             fontSize: 1,
@@ -79,18 +129,15 @@ export default function SubmissionCard({ submission }) {
             overflowWrap: "anywhere",
           }}
         >
-          {evidence instanceof Error
-            ? "We are doing some maintenance work and will be online again soon."
-            : evidence?.file?.name &&
-              (name.replaceAll(/[^\s\w]/g, "") ===
-              evidence.file.name.replaceAll(/[^\s\w]/g, "")
-                ? evidence.file.name
-                : "We are doing some maintenance work and will be online again soon.")}
+          {name}
         </Text>
         <Text
           variant="multiClipped"
           sx={{
-            height: 52,
+            opacity: 0.66,
+            lineHeight: "18px",
+            height: 36,
+            fontSize: "12px",
             textAlign: "center",
             wordBreak: "break-word",
           }}