Add site explainer

attestate · Jan 28, 2025 · da3ed9f · da3ed9f
1 parent 779db3d
commit da3ed9f
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 6 deletions.
diff --git a/src/web/src/CommentInput.jsx b/src/web/src/CommentInput.jsx
@@ -9,6 +9,58 @@ import * as API from "./API.mjs";
 import { getLocalAccount } from "./session.mjs";
 import { client, chains, useProvider, useSigner } from "./client.mjs";
 
+const SiteExplainer = () => {
+  return (
+    <div
+      style={{
+        padding: "12px",
+        marginBottom: "1rem",
+        backgroundColor: "var(--middle-beige)",
+        border: "var(--border)",
+        borderRadius: "2px",
+      }}
+    >
+      <p
+        style={{
+          fontSize: "11pt",
+          margin: "0 0 8px 0",
+          color: "#666",
+        }}
+      >
+        Kiwi is Ethereum Hacker News, built for handpicked, long-form content
+        and deep discussions.
+      </p>
+
+      <p
+        style={{
+          fontSize: "11pt",
+          margin: "0 0 12px 0",
+          color: "#666",
+        }}
+      >
+        Want to leave a comment, upvote this link or join our community of 500+
+        Ethereum builders?
+      </p>
+
+      <a href="/kiwipass-mint">
+        <button
+          style={{
+            padding: "6px 12px",
+            background: "black",
+            color: "white",
+            border: "var(--border)",
+            borderRadius: "2px",
+            cursor: "pointer",
+            fontSize: "10pt",
+          }}
+        >
+          Sign up
+        </button>
+      </a>
+    </div>
+  );
+};
+
 const CommentInput = (props) => {
   const { toast, allowlist, delegations } = props;
 
@@ -161,6 +213,8 @@ const CommentInput = (props) => {
     document.addEventListener("keydown", handleKeyPress);
     return () => document.removeEventListener("keydown", handleKeyPress);
   }, [text, address, isEligible]);
+
+  if (!isEligible) return <SiteExplainer />;
   return (
     <div
       style={{

diff --git a/src/web/src/CommentSection.jsx b/src/web/src/CommentSection.jsx
@@ -4,6 +4,7 @@ import Linkify from "linkify-react";
 import { useAccount, WagmiConfig } from "wagmi";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { Wallet } from "@ethersproject/wallet";
+import { eligible } from "@attestate/delegator2";
 
 import { useProvider, client, chains } from "./client.mjs";
 import CommentInput from "./CommentInput.jsx";
@@ -55,7 +56,38 @@ function truncateName(name) {
     return name;
   return name.slice(0, maxLength) + "...";
 }
+
 function NotificationOptIn(props) {
+  const account = useAccount();
+  const localAccount = getLocalAccount(account.address, props.allowlist);
+  const provider = useProvider();
+  const [identity, setIdentity] = useState(null);
+  const [signer, setSigner] = useState(null);
+
+  useEffect(() => {
+    async function init() {
+      if (!localAccount || !account) {
+        setIdentity(null);
+        return;
+      }
+
+      const s = new Wallet(localAccount.privateKey, provider);
+      setSigner(s);
+
+      const addr = await s.getAddress();
+      const isEligible = await eligible(
+        props.allowlist,
+        props.delegations,
+        addr,
+      );
+
+      setIdentity(isEligible);
+    }
+
+    init();
+  }, [account?.account]);
+
+  if (!identity) return null;
   return (
     <div
       style={{
@@ -77,11 +109,7 @@ function NotificationOptIn(props) {
         submissions
       </p>
 
-      <WagmiConfig config={client}>
-        <RainbowKitProvider chains={chains}>
-          <EmailNotificationLink {...props} />
-        </RainbowKitProvider>
-      </WagmiConfig>
+      <EmailNotificationLink {...props} />
     </div>
   );
 }
@@ -92,6 +120,10 @@ const EmailNotificationLink = (props) => {
   const account = useAccount();
   const localAccount = getLocalAccount(account.address, props.allowlist);
   const provider = useProvider();
+  const identity =
+    account.address &&
+    localAccount &&
+    eligible(props.allowlist, props.delegations, localAccount.address);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -382,7 +414,11 @@ const CommentsSection = (props) => {
         fontSize: "1rem",
       }}
     >
-      <NotificationOptIn {...props} />
+      <WagmiConfig config={client}>
+        <RainbowKitProvider chains={chains}>
+          <NotificationOptIn {...props} />
+        </RainbowKitProvider>
+      </WagmiConfig>
       {comments.length > 0 &&
         comments.map((comment, index) => (
           <Comment