Feature/comment function

.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@mui/*/*/*"]
+      }
+    ]
+  }
 }

package.json

@@ -12,6 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@bundlr-network/client": "^0.11.2",
     "@lens-protocol/client": "^1.0.1",
     "@lens-protocol/react-web": "^1.0.1",
     "@lens-protocol/wagmi": "^1.0.1",
@@ -40,6 +41,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "^1.62.1",
+    "sharp": "^0.32.1",
     "styled-components": "^6.0.0-rc.1",
     "typescript": "5.0.4",
     "wagmi": "0.12.13",

src/assets/scss/_themes-vars.module.scss

@@ -1,16 +1,16 @@
 // paper & background
-$paper: #ffffff;
+$paper: #fffffe;
 
 // primary
 $primaryLight: #eef2f6;
-$primaryMain: #2196f3;
+$primaryMain: #078080;
 $primaryDark: #1e88e5;
 $primary200: #90caf9;
 $primary800: #1565c0;
 
 // secondary
 $secondaryLight: #ede7f6;
-$secondaryMain: #673ab7;
+$secondaryMain: #f45d48;
 $secondaryDark: #5e35b1;
 $secondary200: #b39ddb;
 $secondary800: #4527a0;

src/components/Account.tsx

@@ -6,24 +6,21 @@ import styled from 'styled-components';
 // easier to just override per our need
 const StyledConnectButtonWrapper = styled.div`
   .rainbowkit-connect-btn button {
-    height: 100px;
-    font-size: 1em;
-    width: 100%;
-    color: black;
-    text-decoration: underline;
+    height: 30px;
+    min-width: max-content;
+    text-decoration: none;
     border: 0px;
     cursor: pointer;
+    margin-top: 3px;
   }
 `;
 
 export const Account = () => {
-  const wagmiAccount = useAccount();
-
   return (
     <StyledConnectButtonWrapper>
       <div className="rainbowkit-box">
         <div className="rainbowkit-connect-btn">
-          <ConnectButton label="Sign Up" />
+          <ConnectButton label="Log In" />
         </div>
       </div>
     </StyledConnectButtonWrapper>

src/components/CauseAttestationList.tsx

@@ -74,7 +74,7 @@ export const CauseAttestationList = ({
             })}
         </List>
       </section>
-      <section>
+      {/* <section>
         <h3>community support</h3>
         <Grid container alignItems="flex-start">
           <Grid item>
@@ -93,7 +93,7 @@ export const CauseAttestationList = ({
             </AvatarGroup>
           </Grid>
         </Grid>
-      </section>
+      </section> */}
     </div>
   );
 };

src/components/CollectButtonWrapper.tsx

@@ -1,79 +1,113 @@
 import {
-    Amount, TokenAllowanceLimit, AnyPublication, Post,
-    UsePublicationArgs, useActiveProfile, useActiveWallet, useApproveModule,
-    useCollect, useEnabledModules, usePublication, useWalletLogin, useCurrencies, useWhoCollectedPublication,
-    PublicationId,
-    FeeCollectPolicy
-} from "@lens-protocol/react-web";
+  Amount,
+  TokenAllowanceLimit,
+  AnyPublication,
+  Post,
+  UsePublicationArgs,
+  useActiveProfile,
+  useActiveWallet,
+  useApproveModule,
+  useCollect,
+  useEnabledModules,
+  usePublication,
+  useWalletLogin,
+  useCurrencies,
+  useWhoCollectedPublication,
+  PublicationId,
+  FeeCollectPolicy,
+} from '@lens-protocol/react-web';
 
 // https://github.com/lens-protocol/lens-sdk/blob/main/examples/web-wagmi/src/publications/UseCollect.tsx
-import { useState } from "react";
-import { Alert, Chip } from "@mui/material";
+import { useState } from 'react';
+import { Alert, Chip } from '@mui/material';
 
-export const CollectButtonWrapper = ({ publicationId, currencyAddress, children }: { publicationId: string, currencyAddress: string, children: React.ReactNode }) => {
-    const { data, loading } = useActiveProfile();
-    const { data: wallet } = useActiveWallet();
-    const { data: enabledModules } = useEnabledModules();
-    const { execute: approve } = useApproveModule();
-    const collector = data!;
-    const { data: currencies = [], error: currenciesError, loading: currenciesLoading } = useCurrencies();
-    const { data: publicationResult } = usePublication({ publicationId } as UsePublicationArgs);
-    const publication = publicationResult as Post;
+export const CollectButtonWrapper = ({
+  publicationId,
+  currencyAddress,
+  children,
+}: {
+  publicationId: string;
+  currencyAddress: string;
+  children: React.ReactNode;
+}) => {
+  const { data, loading } = useActiveProfile();
+  const { data: wallet } = useActiveWallet();
+  const { data: enabledModules } = useEnabledModules();
+  const { execute: approve } = useApproveModule();
+  const collector = data!;
+  const {
+    data: currencies = [],
+    error: currenciesError,
+    loading: currenciesLoading,
+  } = useCurrencies();
+  const { data: publicationResult } = usePublication({
+    publicationId,
+  } as UsePublicationArgs);
+  const publication = publicationResult as Post;
 
-    // publication will not refresh on collect, handle that manually
-    const [isCollected, setIsCollected] = useState(publication?.hasCollectedByMe);
-    // TODO query if alraeady approved
+  // publication will not refresh on collect, handle that manually
+  const [isCollected, setIsCollected] = useState(publication?.hasCollectedByMe);
+  // TODO query if alraeady approved
 
-    // approve first (not necessary for sandbox env)
-    const { execute: collect, error: collectEror, isPending } = useCollect({ collector, publication: publication as AnyPublication });
-    // TODO fix action
+  // approve first (not necessary for sandbox env)
+  const {
+    execute: collect,
+    error: collectEror,
+    isPending,
+  } = useCollect({ collector, publication: publication as AnyPublication });
+  // TODO fix action
 
+  const collectPolicy = publication?.collectPolicy as FeeCollectPolicy;
 
-    const collectPolicy = publication?.collectPolicy as FeeCollectPolicy;
-
-    return (
-        !publication || !wallet?.address ? (
-            <div> Loading...</div >
-        )
-            : (
-                <>
-                    {collectEror && !isPending &&
-                        <Alert severity="error">{collectEror?.message}</Alert>
-                    }
-                    <div>Collect Price ${collectPolicy?.amount.toNumber()} </div>
-                    {
-                        isCollected ? <Chip label="Thank you for donating" variant="outlined" /> : (
-                            <div onClick={async () => {
-                                let results = await collect();
-                                // could approve from the amount of policy while easier to approve in bulk at once
-                                // @ts-ignore
-                                if (collectEror?.name === 'InsufficientAllowanceError') {
-                                    const approvalResults = await approve({
-                                        spender: enabledModules?.collectModules.find(m => m.moduleName === 'FeeCollectModule')!.contractAddress!,
-                                        amount: Amount.erc20(currencies!.find(c => c.address === currencyAddress)!, 0.5),
-                                        limit: TokenAllowanceLimit.EXACT,
-
-                                    });
-                                    if (approvalResults.isSuccess()) {
-                                        results = await collect();
-                                        console.log('approvalResults', approvalResults)
-                                    } else {
-                                        console.log('error in approval', approvalResults)
-                                    }
-
-                                }
-                                if (results) {
-                                    console.log('collect', results)
-                                    if (results.isSuccess()) {
-                                        setIsCollected(true)
-                                    }
-
-                                }
-
-                            }}>{children}</div>
-                        )
-                    }
-                </>
-            )
-    )
-}
+  return !publication || !wallet?.address ? (
+    <div>
+      <Alert severity="warning">
+        Please log in your Lens Profile for more details...
+      </Alert>
+    </div>
+  ) : (
+    <>
+      {collectEror && !isPending && (
+        <Alert severity="error">{collectEror?.message}</Alert>
+      )}
+      <div>Collect Price ${collectPolicy?.amount.toNumber()} </div>
+      {isCollected ? (
+        <Chip label="Thank you for donating" variant="outlined" />
+      ) : (
+        <div
+          onClick={async () => {
+            let results = await collect();
+            // could approve from the amount of policy while easier to approve in bulk at once
+            // @ts-ignore
+            if (collectEror?.name === 'InsufficientAllowanceError') {
+              const approvalResults = await approve({
+                spender: enabledModules?.collectModules.find(
+                  (m) => m.moduleName === 'FeeCollectModule',
+                )!.contractAddress!,
+                amount: Amount.erc20(
+                  currencies!.find((c) => c.address === currencyAddress)!,
+                  0.5,
+                ),
+                limit: TokenAllowanceLimit.EXACT,
+              });
+              if (approvalResults.isSuccess()) {
+                results = await collect();
+                console.log('approvalResults', approvalResults);
+              } else {
+                console.log('error in approval', approvalResults);
+              }
+            }
+            if (results) {
+              console.log('collect', results);
+              if (results.isSuccess()) {
+                setIsCollected(true);
+              }
+            }
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};

src/components/CommentComposer.tsx

@@ -0,0 +1,70 @@
+import {
+  ContentFocus,
+  ProfileOwnedByMe,
+  useCreateComment,
+  PublicationId,
+  CollectPolicyType,
+} from '@lens-protocol/react-web';
+import { TextField, Button, Grid, InputAdornment } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import { upload } from '../libs/lens/upload';
+import { useState } from 'react';
+
+export const CommentComposer = ({
+  publisher,
+  publicationId,
+}: {
+  publisher: ProfileOwnedByMe;
+  publicationId: PublicationId;
+}) => {
+  const {
+    execute: comment,
+    error,
+    isPending,
+  } = useCreateComment({ publisher, upload });
+
+  const [commentContent, setCommentContent] = useState('');
+
+  const submit = async (content: string) => {
+    let result = await comment({
+      publicationId,
+      content,
+      contentFocus: ContentFocus.TEXT,
+      locale: 'en',
+      collect: {
+        type: CollectPolicyType.NO_COLLECT,
+      },
+    });
+
+    setCommentContent('');
+  };
+
+  return (
+    <TextField
+      size="small"
+      type="text"
+      id="comment"
+      value={commentContent}
+      placeholder="Leave your comment ..."
+      disabled={isPending}
+      onChange={(e) => setCommentContent(e.target.value)}
+      sx={{
+        display: 'flex',
+        minWidth: '400px',
+        maxWidth: '800px',
+      }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Button
+              variant="text"
+              disabled={isPending}
+              endIcon={<SendIcon />}
+              onClick={() => submit(commentContent)}
+            ></Button>
+          </InputAdornment>
+        ),
+      }}
+    ></TextField>
+  );
+};