add comments/auth

components/AuthButton.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Button, ButtonProps } from "@chakra-ui/react";
+import { useAccount, useConnect } from "wagmi";
+import toast from "react-hot-toast";
+
+interface AuthButtonProps extends ButtonProps {}
+
+const AuthButton: React.FunctionComponent<AuthButtonProps> = (props) => {
+  const [connectQuery, connect] = useConnect();
+  const [accountQuery] = useAccount();
+
+  React.useEffect(() => {
+    if (connectQuery.error?.name === "ConnectorNotFoundError") {
+      toast.error("Metamask extension required to sign in");
+    }
+  }, [connectQuery.error]);
+
+  // If not authenticated, require sign-in
+  if (!accountQuery.data?.address) {
+    return (
+      <Button
+        {...props}
+        onClick={() => {
+          connect(connectQuery.data.connectors[0]);
+        }}
+      >
+        Sign In
+      </Button>
+    );
+  }
+
+  // If authenticated, show button as usual
+  return <Button {...props}>{props.children}</Button>;
+};
+
+export default AuthButton;

components/CommentEditor.tsx

@@ -0,0 +1,64 @@
+import { HStack, Stack, Textarea } from "@chakra-ui/react";
+import * as React from "react";
+import Avatar from "@davatar/react";
+import AuthButton from "./AuthButton";
+import { useAccount } from "wagmi";
+import useAddComment from "../hooks/useAddComment";
+
+interface CommentEditorProps {
+  topic: string;
+}
+
+const CommentEditor: React.FunctionComponent<CommentEditorProps> = ({
+  topic,
+}) => {
+  const [message, setMessage] = React.useState("");
+  const mutation = useAddComment();
+  const [accountQuery] = useAccount();
+
+  return (
+    <Stack spacing={3}>
+      <HStack spacing={3} alignItems="start">
+        <Avatar
+          size={48}
+          address={
+            accountQuery.data?.address ||
+            "0x0000000000000000000000000000000000000000"
+          }
+        />
+        <Textarea
+          value={message}
+          onChange={(e) => {
+            setMessage(e.target.value);
+          }}
+          placeholder="Write a message.."
+          p={3}
+          flex={1}
+          bg="whiteAlpha.100"
+          rounded="2xl"
+          fontSize="lg"
+        />
+      </HStack>
+      <AuthButton
+        size="sm"
+        colorScheme="pink"
+        alignSelf="flex-end"
+        onClick={() => {
+          mutation
+            .mutateAsync({
+              message,
+              topic,
+            })
+            .then(() => {
+              setMessage("");
+            });
+        }}
+        isLoading={mutation.isLoading}
+      >
+        Submit
+      </AuthButton>
+    </Stack>
+  );
+};
+
+export default CommentEditor;

components/Comments.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Box, Spinner, Stack, Center } from "@chakra-ui/react";
 import useComments from "../hooks/useComments";
 import Comment from "./Comment";
+import CommentEditor from "./CommentEditor";
 
 interface CommentsProps {
   topic: string;
@@ -21,6 +22,7 @@ const Comments: React.FunctionComponent<CommentsProps> = ({ topic }) => {
         {query.data?.map((comment) => (
           <Comment key={comment.id} comment={comment} />
         ))}
+        {query.isFetched && <CommentEditor topic={topic} />}
       </Stack>
     </Box>
   );

hooks/useAddComment.ts

@@ -0,0 +1,17 @@
+import { useMutation } from "react-query";
+import useCommentsContract from "./useCommentsContract";
+
+interface UseAddCommentPayload {
+  topic: string;
+  message: string;
+}
+
+const useAddComment = () => {
+  const contract = useCommentsContract();
+
+  return useMutation(async ({ topic, message }: UseAddCommentPayload) => {
+    await contract.addComment(topic, message);
+  });
+};
+
+export default useAddComment;