├── .eslintrc.json
├── .gitignore
├── README.md
├── components
    ├── AuthButton.tsx
    ├── Comment.tsx
    ├── CommentEditor.tsx
    ├── Comments.tsx
    ├── README.md
    └── Username.tsx
├── contracts
    └── Comments.sol
├── hardhat.config.js
├── hooks
    ├── README.md
    ├── useAddComment.ts
    ├── useComments.ts
    ├── useCommentsContract.ts
    └── useEvents.ts
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.tsx
    └── index.tsx
├── public
    ├── favicon.ico
    └── vercel.svg
├── scripts
    └── deploy-and-seed.js
├── test
    └── basic.js
├── theme.ts
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 
36 | # typescript
37 | *.tsbuildinfo
38 | 
39 | node_modules
40 | .env
41 | coverage
42 | coverage.json
43 | typechain
44 | 
45 | #Hardhat files
46 | cache
47 | artifacts
48 | 
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Create a Web3 Forum with Polygon
 2 | 
 3 | ### Tutorial Details
 4 | 
 5 | Today we're going to build together a fullstack decentralized forum that can be used in any dapp.
 6 | 
 7 | See the full tutorial here -> https://www.pointer.gg/tutorials/create-a-web3-forum-with-polygon/1cb8f005-08f4-48a2-9d82-cd963e16f7f1
 8 | 
 9 | ### Overview
10 | 
11 | To us at Pointer, one of the most interesting aspects of web3 is that it facilitates developers to build and share composable behaviors around databases.
12 | 
13 | Anyone can dig up a smart contract on GitHub, deploy it, and have their own microservice running in seconds.
14 | 
15 | Not only that, but the stable API exposed by a smart contract is a blank canvas on top of which any frontend developer in the community can build and share components.
16 | 
17 | In that spirit, today we're going to build a deployable smart contract and an accompanying React component to add comment threads to your dapps.
18 | 
19 | In theory this could be open sourced and published as an npm package to allow any developer to quickly add a forum to their dapp.
20 | 
21 | Here's what we're going to build:
22 | 
23 | https://user-images.githubusercontent.com/5760059/154543585-74136a91-bac1-4935-8790-c943b71f43df.mov
24 | 
25 | Visit the tutorial to get started https://www.pointer.gg/tutorials/create-a-web3-forum-with-polygon/1cb8f005-08f4-48a2-9d82-cd963e16f7f1
26 | 


--------------------------------------------------------------------------------
/components/AuthButton.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Button, ButtonProps } from "@chakra-ui/react";
 3 | import { useAccount, useConnect } from "wagmi";
 4 | import toast from "react-hot-toast";
 5 | 
 6 | interface AuthButtonProps extends ButtonProps {}
 7 | 
 8 | const AuthButton: React.FunctionComponent<AuthButtonProps> = (props) => {
 9 |   const [connectQuery, connect] = useConnect();
10 |   const [accountQuery] = useAccount();
11 | 
12 |   React.useEffect(() => {
13 |     if (connectQuery.error?.name === "ConnectorNotFoundError") {
14 |       toast.error("Metamask extension required to sign in");
15 |     }
16 |   }, [connectQuery.error]);
17 | 
18 |   // If not authenticated, require sign-in
19 |   if (!accountQuery.data?.address) {
20 |     return (
21 |       <Button
22 |         {...props}
23 |         onClick={() => {
24 |           connect(connectQuery.data.connectors[0]);
25 |         }}
26 |       >
27 |         Sign In
28 |       </Button>
29 |     );
30 |   }
31 | 
32 |   // If authenticated, show button as usual
33 |   return <Button {...props}>{props.children}</Button>;
34 | };
35 | 
36 | export default AuthButton;
37 | 


--------------------------------------------------------------------------------
/components/Comment.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Text, Heading, HStack, Stack } from "@chakra-ui/react";
 3 | import TimeAgo from "react-timeago";
 4 | import Avatar from "@davatar/react";
 5 | import Username from "./Username";
 6 | import { Comment } from "../hooks/useCommentsContract";
 7 | 
 8 | interface CommentProps {
 9 |   comment: Comment;
10 | }
11 | 
12 | const Comment: React.FunctionComponent<CommentProps> = ({ comment }) => {
13 |   return (
14 |     <HStack spacing={3} alignItems="start">
15 |       <Avatar size={48} address={comment.creator_address} />
16 |       <Stack spacing={1} flex={1} bg="whiteAlpha.100" rounded="2xl" p={3}>
17 |         <Heading color="whiteAlpha.900" fontSize="lg">
18 |           <Username address={comment.creator_address} />
19 |         </Heading>
20 |         <Text color="whiteAlpha.800" fontSize="lg">
21 |           {comment.message}
22 |         </Text>
23 |         <Text color="whiteAlpha.500" fontSize="md">
24 |           <TimeAgo date={comment.created_at.toNumber() * 1000} />
25 |         </Text>
26 |       </Stack>
27 |     </HStack>
28 |   );
29 | };
30 | 
31 | export default Comment;
32 | 


--------------------------------------------------------------------------------
/components/CommentEditor.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { HStack, Stack, Textarea } from "@chakra-ui/react";
 3 | import { constants } from "ethers";
 4 | import Avatar from "@davatar/react";
 5 | import AuthButton from "./AuthButton";
 6 | import { useAccount } from "wagmi";
 7 | import useAddComment from "../hooks/useAddComment";
 8 | 
 9 | interface CommentEditorProps {
10 |   topic: string;
11 | }
12 | 
13 | const CommentEditor: React.FunctionComponent<CommentEditorProps> = ({
14 |   topic,
15 | }) => {
16 |   const [message, setMessage] = React.useState("");
17 |   const mutation = useAddComment();
18 |   const [accountQuery] = useAccount();
19 | 
20 |   return (
21 |     <Stack spacing={3}>
22 |       <HStack spacing={3} alignItems="start">
23 |         <Avatar
24 |           size={48}
25 |           address={accountQuery.data?.address || constants.AddressZero}
26 |         />
27 |         <Textarea
28 |           value={message}
29 |           onChange={(e) => setMessage(e.target.value)}
30 |           placeholder="Write a message.."
31 |           p={3}
32 |           flex={1}
33 |           bg="whiteAlpha.100"
34 |           rounded="2xl"
35 |           fontSize="lg"
36 |         />
37 |       </HStack>
38 |       <AuthButton
39 |         size="sm"
40 |         colorScheme="pink"
41 |         alignSelf="flex-end"
42 |         onClick={() => {
43 |           mutation
44 |             .mutateAsync({
45 |               message,
46 |               topic,
47 |             })
48 |             .then(() => setMessage(""));
49 |         }}
50 |         isLoading={mutation.isLoading}
51 |       >
52 |         Submit
53 |       </AuthButton>
54 |     </Stack>
55 |   );
56 | };
57 | 
58 | export default CommentEditor;
59 | 


--------------------------------------------------------------------------------
/components/Comments.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Box, Spinner, Stack, Center } from "@chakra-ui/react";
 3 | import Comment from "./Comment";
 4 | import CommentEditor from "./CommentEditor";
 5 | import useComments from "../hooks/useComments";
 6 | import useEvents from "../hooks/useEvents";
 7 | 
 8 | interface CommentsProps {
 9 |   topic: string;
10 | }
11 | 
12 | const Comments: React.FunctionComponent<CommentsProps> = ({ topic }) => {
13 |   const query = useComments({ topic });
14 | 
15 |   useEvents({ topic });
16 | 
17 |   return (
18 |     <Box>
19 |       {query.isLoading && (
20 |         <Center p={8}>
21 |           <Spinner />
22 |         </Center>
23 |       )}
24 |       <Stack spacing={4}>
25 |         {query.data?.map((comment) => (
26 |           <Comment key={comment.id} comment={comment} />
27 |         ))}
28 |         {query.isFetched && <CommentEditor topic={topic} />}
29 |       </Stack>
30 |     </Box>
31 |   );
32 | };
33 | 
34 | export default Comments;
35 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | ## Components
2 | 
3 | This folder contains all of the React components that we will use in our app.
4 | 


--------------------------------------------------------------------------------
/components/Username.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Text, TextProps } from "@chakra-ui/react";
 3 | import { useEnsLookup } from "wagmi";
 4 | import truncateMiddle from "truncate-middle";
 5 | 
 6 | interface UsernameProps extends TextProps {
 7 |   address: string;
 8 | }
 9 | 
10 | const Username: React.FunctionComponent<UsernameProps> = ({
11 |   address,
12 |   ...otherProps
13 | }) => {
14 |   const [query] = useEnsLookup({ address });
15 | 
16 |   // Show ens name if exists, but show truncated address as fallback
17 |   return (
18 |     <Text
19 |       display="inline"
20 |       textTransform={query.data ? "none" : "uppercase"}
21 |       {...otherProps}
22 |     >
23 |       {query.data || truncateMiddle(address || "", 5, 4, "...")}
24 |     </Text>
25 |   );
26 | };
27 | 
28 | export default Username;
29 | 


--------------------------------------------------------------------------------
/contracts/Comments.sol:
--------------------------------------------------------------------------------
 1 | //SPDX-License-Identifier: Unlicense
 2 | pragma solidity ^0.8.0;
 3 | 
 4 | import "hardhat/console.sol";
 5 | 
 6 | contract Comments {
 7 |     struct Comment {
 8 |         uint32 id;
 9 |         string topic;
10 |         address creator_address;
11 |         string message;
12 |         uint created_at;
13 |     }
14 | 
15 |     uint32 private idCounter;
16 |     mapping(string => Comment[]) private commentsByTopic;
17 |         
18 |     event CommentAdded(Comment comment);
19 | 
20 |     function getComments(string calldata topic) public view returns(Comment[] memory) {
21 |        return commentsByTopic[topic];
22 |     }
23 | 
24 |     function addComment(string calldata topic, string calldata message) public {
25 |         Comment memory comment = Comment({
26 |             id: idCounter,
27 |             topic: topic,
28 |             creator_address: msg.sender,
29 |             message: message,
30 |             created_at: block.timestamp
31 |         });
32 |         commentsByTopic[topic].push(comment);
33 |         idCounter++;
34 |         emit CommentAdded(comment);
35 |     }
36 | }


--------------------------------------------------------------------------------
/hardhat.config.js:
--------------------------------------------------------------------------------
 1 | require("@nomiclabs/hardhat-waffle");
 2 | 
 3 | // This is a sample Hardhat task. To learn how to create your own go to
 4 | // https://hardhat.org/guides/create-task.html
 5 | task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
 6 |   const accounts = await hre.ethers.getSigners();
 7 | 
 8 |   for (const account of accounts) {
 9 |     console.log(account.address);
10 |   }
11 | });
12 | 
13 | // You need to export an object to set up your config
14 | // Go to https://hardhat.org/config/ to learn more
15 | 
16 | /**
17 |  * @type import('hardhat/config').HardhatUserConfig
18 |  */
19 | module.exports = {
20 |   solidity: "0.8.4",
21 |   networks: {
22 |     hardhat: {
23 |       chainId: 1337,
24 |     },
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/hooks/README.md:
--------------------------------------------------------------------------------
1 | ## Hooks
2 | 
3 | This folder contains all of the React hooks that we will use in our app.
4 | 


--------------------------------------------------------------------------------
/hooks/useAddComment.ts:
--------------------------------------------------------------------------------
 1 | import { useMutation } from "react-query";
 2 | import useCommentsContract from "./useCommentsContract";
 3 | 
 4 | interface UseAddCommentPayload {
 5 |   topic: string;
 6 |   message: string;
 7 | }
 8 | 
 9 | const useAddComment = () => {
10 |   const contract = useCommentsContract();
11 | 
12 |   return useMutation(async ({ topic, message }: UseAddCommentPayload) => {
13 |     await contract.addComment(topic, message);
14 |   });
15 | };
16 | 
17 | export default useAddComment;
18 | 


--------------------------------------------------------------------------------
/hooks/useComments.ts:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "react-query";
 2 | import useCommentsContract from "./useCommentsContract";
 3 | 
 4 | interface UseCommentsQuery {
 5 |   topic: string;
 6 | }
 7 | 
 8 | const useComments = ({ topic }: UseCommentsQuery) => {
 9 |   const contract = useCommentsContract();
10 |   return useQuery(["comments", { topic, chainId: contract.chainId }], () =>
11 |     contract.getComments(topic)
12 |   );
13 | };
14 | 
15 | export default useComments;
16 | 


--------------------------------------------------------------------------------
/hooks/useCommentsContract.ts:
--------------------------------------------------------------------------------
 1 | import * as wagmi from "wagmi";
 2 | import { useProvider, useSigner } from "wagmi";
 3 | import type { BigNumber } from "ethers";
 4 | // Import our contract ABI (a json representation of our contract's public interface).
 5 | // The hardhat compiler writes this file to artifacts during compilation.
 6 | import CommentsContract from "../artifacts/contracts/Comments.sol/Comments.json";
 7 | 
 8 | export interface Comment {
 9 |   id: string;
10 |   topic: string;
11 |   message: string;
12 |   creator_address: string;
13 |   created_at: BigNumber;
14 | }
15 | 
16 | export enum EventType {
17 |   CommentAdded = "CommentAdded",
18 | }
19 | 
20 | const useCommentsContract = () => {
21 |   // An ethers.Signer instance associated with the signed-in wallet.
22 |   // https://docs.ethers.io/v5/api/signer/
23 |   const [signer] = useSigner();
24 |   // An ethers.Provider instance. This will be the same provider that is
25 |   // passed as a prop to the WagmiProvider.
26 |   const provider = useProvider();
27 | 
28 |   // This returns a new ethers. Contract ready to interact with our comments API.
29 |   // We need to pass in the address of our deployed contract as well as its abi.
30 |   // We also pass in the signer if there is a signed in wallet, or if there's
31 |   // no signed in wallet then we'll pass in the connected provider.
32 |   const contract = wagmi.useContract({
33 |     addressOrName: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
34 |     contractInterface: CommentsContract.abi,
35 |     signerOrProvider: signer.data || provider,
36 |   });
37 | 
38 |   // Wrapper to add types to our getComments function.
39 |   const getComments = async (topic: string): Promise<Comment[]> => {
40 |     return contract.getComments(topic).then((comments) => {
41 |       // Each comment is represented as array by default so we convert to object
42 |       return comments.map((c) => ({ ...c }));
43 |     });
44 |   };
45 | 
46 |   // Wrapper to add types to our addComment function.
47 |   const addComment = async (topic: string, message: string): Promise<void> => {
48 |     // Create a new transaction
49 |     const tx = await contract.addComment(topic, message);
50 |     // Wait for transaction to be mined
51 |     await tx.wait();
52 |   };
53 | 
54 |   return {
55 |     contract,
56 |     chainId: contract.provider.network?.chainId,
57 |     getComments,
58 |     addComment,
59 |   };
60 | };
61 | 
62 | export default useCommentsContract;
63 | 


--------------------------------------------------------------------------------
/hooks/useEvents.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useQueryClient } from "react-query";
 3 | import useCommentsContract, { EventType } from "./useCommentsContract";
 4 | 
 5 | interface UseEventsQuery {
 6 |   topic: string;
 7 | }
 8 | 
 9 | // Listen to events and refresh data
10 | const useEvents = ({ topic }: UseEventsQuery) => {
11 |   const queryClient = useQueryClient();
12 |   const commentsContract = useCommentsContract();
13 | 
14 |   useEffect(() => {
15 |     const handler = (comment) => {
16 |       if (comment.topic !== topic) {
17 |         return;
18 |       }
19 |       // Invalidates the query whose query key matches the passed array.
20 |       // This will cause the useComments hook to re-render the Comments
21 |       // component with fresh data.
22 |       queryClient.invalidateQueries([
23 |         "comments",
24 |         { topic: comment.topic, chainId: commentsContract.chainId },
25 |       ]);
26 |     };
27 | 
28 |     commentsContract.contract.on(EventType.CommentAdded, handler);
29 | 
30 |     return () => {
31 |       commentsContract.contract.off(EventType.CommentAdded, handler);
32 |     };
33 |   }, [queryClient, commentsContract.chainId, topic]);
34 | };
35 | 
36 | export default useEvents;
37 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "comments-with-polygon",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@chakra-ui/icons": "^1.1.5",
12 |     "@chakra-ui/react": "^1.8.3",
13 |     "@davatar/react": "^1.8.1",
14 |     "@emotion/react": "^11.7.1",
15 |     "@emotion/styled": "^11.6.0",
16 |     "@fontsource/poppins": "^4.5.1",
17 |     "framer-motion": "^6.2.6",
18 |     "next": "12.0.10",
19 |     "pubsub-js": "^1.9.4",
20 |     "react": "17.0.2",
21 |     "react-dom": "17.0.2",
22 |     "react-error-boundary": "^3.1.4",
23 |     "react-hot-toast": "^2.2.0",
24 |     "react-query": "^3.34.14",
25 |     "react-timeago": "^6.2.1",
26 |     "truncate-middle": "^1.0.6",
27 |     "uuid": "^8.3.2",
28 |     "wagmi": "^0.2.9"
29 |   },
30 |   "devDependencies": {
31 |     "@nomiclabs/hardhat-ethers": "^2.0.5",
32 |     "@nomiclabs/hardhat-waffle": "^2.0.2",
33 |     "@types/node": "17.0.17",
34 |     "@types/pubsub-js": "^1.8.3",
35 |     "@types/react": "17.0.39",
36 |     "@types/react-timeago": "^4.1.3",
37 |     "@types/truncate-middle": "^1.0.1",
38 |     "@types/uuid": "^8.3.4",
39 |     "chai": "^4.3.6",
40 |     "dotenv": "^16.0.0",
41 |     "eslint": "8.8.0",
42 |     "eslint-config-next": "12.0.10",
43 |     "ethereum-waffle": "^3.4.0",
44 |     "ethers": "^5.5.4",
45 |     "hardhat": "^2.8.4",
46 |     "typescript": "4.5.5"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import type { AppProps } from "next/app";
2 | import "@fontsource/poppins";
3 | 
4 | function MyApp({ Component, pageProps }: AppProps) {
5 |   return <Component {...pageProps} />;
6 | }
7 | 
8 | export default MyApp;
9 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { NextPage } from "next";
 2 | import * as React from "react";
 3 | import { QueryClient, QueryClientProvider, QueryCache } from "react-query";
 4 | import { ChakraProvider, Box, Heading } from "@chakra-ui/react";
 5 | import { Toaster, toast } from "react-hot-toast";
 6 | import theme from "../theme";
 7 | import { Provider as WagmiProvider } from "wagmi";
 8 | import { providers } from "ethers";
 9 | import Comments from "../components/Comments";
10 | 
11 | // Provider that will be used when no wallet is connected (aka no signer)
12 | const provider = providers.getDefaultProvider("http://localhost:8545");
13 | 
14 | // Create a react-query client
15 | const queryClient = new QueryClient({
16 |   defaultOptions: {
17 |     queries: {
18 |       refetchOnWindowFocus: false,
19 |     },
20 |   },
21 |   queryCache: new QueryCache({
22 |     onError: () => {
23 |       toast.error(
24 |         "Network Error: Ensure Metamask is connected to the same network that your contract is deployed to."
25 |       );
26 |     },
27 |   }),
28 | });
29 | 
30 | const App: NextPage = () => {
31 |   return (
32 |     <WagmiProvider autoConnect provider={provider}>
33 |       <ChakraProvider theme={theme}>
34 |         <QueryClientProvider client={queryClient}>
35 |           <Box p={8} maxW="600px" minW="320px" m="0 auto">
36 |             <Comments topic="my-blog-post" />
37 |             <Toaster position="bottom-right" />
38 |           </Box>
39 |         </QueryClientProvider>
40 |       </ChakraProvider>
41 |     </WagmiProvider>
42 |   );
43 | };
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pointer-gg/comments-with-polygon/ec6a48c10d491e098d3a079dd58263943010f322/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/scripts/deploy-and-seed.js:
--------------------------------------------------------------------------------
 1 | // We require the Hardhat Runtime Environment explicitly here. This is optional
 2 | // but useful for running the script in a standalone fashion through `node <script>`.
 3 | //
 4 | // When running the script with `npx hardhat run <script>` you'll find the Hardhat
 5 | // Runtime Environment's members available in the global scope.
 6 | const hre = require("hardhat");
 7 | 
 8 | async function main() {
 9 |   // Hardhat always runs the compile task when running scripts with its command
10 |   // line interface.
11 |   //
12 |   // If this script is run directly using `node` you may want to call compile
13 |   // manually to make sure everything is compiled
14 |   // await hre.run('compile');
15 | 
16 |   // We get the contract to deploy
17 |   const CommentsContract = await hre.ethers.getContractFactory("Comments");
18 |   const contract = await CommentsContract.deploy();
19 | 
20 |   await contract.deployed();
21 | 
22 |   const tx1 = await contract.addComment("my-blog-post", "My first comment");
23 |   await tx1.wait();
24 | 
25 |   const tx2 = await contract.addComment("my-blog-post", "My second comment");
26 |   await tx2.wait();
27 | 
28 |   console.log("Contract deployed to:", contract.address);
29 | }
30 | 
31 | // We recommend this pattern to be able to use async/await everywhere
32 | // and properly handle errors.
33 | main()
34 |   .then(() => process.exit(0))
35 |   .catch((error) => {
36 |     console.error(error);
37 |     process.exit(1);
38 |   });
39 | 


--------------------------------------------------------------------------------
/test/basic.js:
--------------------------------------------------------------------------------
 1 | const { expect } = require("chai");
 2 | const { ethers } = require("hardhat");
 3 | 
 4 | describe("Comments", function () {
 5 |   it("Should add and fetch successfully", async function () {
 6 |     const Comments = await ethers.getContractFactory("Comments");
 7 |     const comments = await Comments.deploy();
 8 |     await comments.deployed();
 9 | 
10 |     expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(0);
11 | 
12 |     const tx1 = await comments.addComment(
13 |       "my-first-blog-post",
14 |       "my first comment"
15 |     );
16 |     await tx1.wait();
17 | 
18 |     expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(1);
19 |     expect(await comments.getComments("my-second-blog-post")).to.be.lengthOf(0);
20 | 
21 |     const tx2 = await comments.addComment(
22 |       "my-second-blog-post",
23 |       "this comment is on a different thread"
24 |     );
25 |     await tx2.wait();
26 | 
27 |     expect(await comments.getComments("my-first-blog-post")).to.be.lengthOf(1);
28 |     expect(await comments.getComments("my-second-blog-post")).to.be.lengthOf(1);
29 |   });
30 | });
31 | 


--------------------------------------------------------------------------------
/theme.ts:
--------------------------------------------------------------------------------
 1 | import { extendTheme, theme as DEFAULT_THEME } from "@chakra-ui/react";
 2 | 
 3 | const theme = extendTheme({
 4 |   config: {
 5 |     initialColorMode: "dark",
 6 |     useSystemColorMode: false,
 7 |   },
 8 |   fonts: {
 9 |     heading: "Poppins",
10 |     body: "Poppins",
11 |   },
12 |   styles: {
13 |     global: {
14 |       body: {
15 |         bgGradient: "",
16 |       },
17 |     },
18 |   },
19 |   colors: {
20 |     gray: {
21 |       50: "#FAFAFA",
22 |       100: "#F5F5F5",
23 |       200: "#E5E5E5",
24 |       300: "#D4D4D4",
25 |       400: "#A3A3A3",
26 |       500: "#737373",
27 |       600: "#525252",
28 |       700: "#404040",
29 |       800: "#262626",
30 |       900: "#171717",
31 |     },
32 |   },
33 |   components: {
34 |     Avatar: {
35 |       baseStyle: {
36 |         container: {
37 |           bgGradient: "linear(to-r, purple.300, pink.300)",
38 |           // border: "2px solid var(--chakra-colors-purple-300)"
39 |         },
40 |       },
41 |     },
42 |     Textarea: {
43 |       defaultProps: {
44 |         focusBorderColor: "pink.200",
45 |       },
46 |     },
47 |     Spinner: {
48 |       baseStyle: {
49 |         color: "pink.200",
50 |       },
51 |     },
52 |   },
53 |   shadows: {
54 |     outline: "0 0 0 3px var(--chakra-colors-pink-200) !important",
55 |   },
56 | });
57 | 
58 | export default theme;
59 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": false,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------