docs(app): added disclaimer declaring end of support for v1

components/disclaimer.js

@@ -0,0 +1,61 @@
+import { WarningCircle } from "@kleros/icons";
+import { Flex, Text } from "theme-ui";
+
+import Link from "./link";
+
+function Disclaimer() {
+  return (
+    <Flex
+      sx={{
+        backgroundColor: "muted",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Flex
+        sx={{
+          alignItems: "center",
+          justifyContent: "center",
+          width: "92vw",
+          backgroundColor: "white",
+          border: "1px solid",
+          borderColor: "primary",
+          marginTop: 2,
+          marginBottom: 2,
+          px: 2,
+        }}
+      >
+        <WarningCircle size={24} sx={{ ml: 2 }} />
+        <Flex
+          sx={{
+            flexDirection: "column",
+            ml: 2,
+            flex: 1,
+            lineHeight: 1.5,
+            my: 2,
+          }}
+        >
+          <Text sx={{ fontWeight: "bold", fontSize: 2, color: "primary" }}>
+            Disclaimer: This is an unsupported version of Proof of Humanity
+          </Text>
+
+          <Text sx={{ fontSize: 1 }}>
+            This version of Proof of Humanity is no longer supported or
+            maintained by Kleros Cooperative. Users are advised that any
+            interactions with this platform are done at their own risk. Kleros
+            Cooperative assumes no responsibility for any issues, including but
+            not limited to deposit losses, security vulnerabilities, technical
+            failures, or inaccuracies, that may arise from the continued use of
+            this version. For the latest supported version, please refer to{" "}
+            <Link href="https://v2.proofofhumanity.id/">
+              Proof of Humanity v2
+            </Link>
+            .
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default Disclaimer;

components/index.js

@@ -61,3 +61,4 @@ export {
 
 export { NextLink, NextETHLink, createWrapConnection } from "./next-router";
 export { zeroAddress, ethereumAddressRegExp, createEnum } from "./parsing";
+export { default as Disclaimer } from "./disclaimer";

icons/index.js

@@ -29,3 +29,4 @@ export { default as Video } from "./video";
 export { default as Warning } from "./warning";
 export { default as X } from "./x";
 export { default as Chat } from "./chat";
+export { default as WarningCircle } from "./warning-circle";

icons/warning-circle.js

@@ -0,0 +1,21 @@
+import { SVG } from "@kleros/components";
+
+export default function WarningCircle(props) {
+  return (
+    <SVG viewBox="0 0 24 24" {...props}>
+      <g clipPath="url(#clip0_5699_4162)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 12C0 5.37321 5.37321 0 12 0C18.6268 0 24 5.37321 24 12C24 18.6268 18.6268 24 12 24C5.37321 24 0 18.6268 0 12ZM2.03571 12C2.03571 17.5018 6.49821 21.9643 12 21.9643C17.5018 21.9643 21.9643 17.5018 21.9643 12C21.9643 6.49821 17.5018 2.03571 12 2.03571C6.49821 2.03571 2.03571 6.49821 2.03571 12ZM11.0904 17.6234C10.8493 17.3823 10.7139 17.0553 10.7139 16.7143C10.7139 16.3733 10.8493 16.0463 11.0904 15.8051C11.3316 15.564 11.6586 15.4286 11.9996 15.4286C12.3406 15.4286 12.6676 15.564 12.9087 15.8051C13.1498 16.0463 13.2853 16.3733 13.2853 16.7143C13.2853 17.0553 13.1498 17.3823 12.9087 17.6234C12.6676 17.8645 12.3406 18 11.9996 18C11.6586 18 11.3316 17.8645 11.0904 17.6234ZM12.6424 13.7143H11.3567C11.2389 13.7143 11.1424 13.6179 11.1424 13.5V6.21429C11.1424 6.09643 11.2389 6 11.3567 6H12.6424C12.7603 6 12.8567 6.09643 12.8567 6.21429V13.5C12.8567 13.6179 12.7603 13.7143 12.6424 13.7143Z"
+          fill="#ff9900"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5699_4162">
+          <rect width={24} height={24} fill="white" />
+        </clipPath>
+      </defs>
+    </SVG>
+  );
+}

pages/_app.js

@@ -1,6 +1,7 @@
 import {
   ArchonProvider,
   Box,
+  Disclaimer,
   Flex,
   HelpPopup,
   Image,
@@ -384,6 +385,7 @@ export default function App({ Component, pageProps }) {
         queries={queries}
         connectToRouteChange={connectToRouteChange}
       >
+        <Disclaimer />
         <Web3Provider
           infuraURL={process.env.NEXT_PUBLIC_INFURA_ENDPOINT}
           contracts={contracts}