🖤💸 ↝ Adding IPFS hash input method for custom modules with a graphql …

…query

Related issues: Signal-K/Silfur#26
Signal-K/Silfur#24
Signal-K/Silfur#22
Signal-K/Silfur#21

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

components/Header.tsx

@@ -7,10 +7,19 @@ export default function Header () {
     return (
         <>
             <div className={styles.headerContainer}>
-                <div>
+                <div className={styles.left}>
                     <Link href={'/'}>
                         <img src="/logo.png" alt='logo' className={styles.logo}/>
                     </Link>
+                    <Link href={'http://skinetics.tech'}>
+                        Portal
+                    </Link>
+                    <Link href={'https://github.com/signal-k'}>
+                        Github
+                    </Link>
+                    <Link href={'/publications/create'}>
+                        Create
+                    </Link>
                 </div>
                 <div className={styles.right}>
                     <SignInButton />

graphql/post.graphql

@@ -0,0 +1,30 @@
+mutation createPostTypedData($request: CreatePublicPostRequest!) {
+  createPostTypedData(request: $request) {
+    id
+    expiresAt
+    typedData {
+      types {
+        PostWithSig {
+          name
+          type
+        }
+      }
+      domain {
+        name
+        chainId
+        version
+        verifyingContract
+      }
+      value {
+        nonce
+        deadline
+        profileId
+        contentURI
+        collectModule
+        collectModuleInitData
+        referenceModule
+        referenceModuleInitData
+      }
+    }
+  }
+}

lib/useCreatePost.ts

@@ -1,8 +1,47 @@
 import { useMutation } from "@tanstack/react-query";
+import { useSDK } from "@thirdweb-dev/react";
+import { useCreatePostTypedDataMutation } from "../graphql/generated";
+import useLensUser from "./auth/useLensUser";
+import { signTypedDataWithOmittedTypename } from "./helpers";
 
-type CreatePostArgs = { // Consider adding more fields as described https://www.notion.so/skinetics/Lens-posting-a07f0e9c243249c0a3517e4160874137#1aa987be357644e596b1bd6b6cba88f9
-    image: File;
-    title: string;
-    description: string;
-    content: string;
-};
+export default function useCreatePost() {
+    const { mutateAsync: requestTypedData } = useCreatePostTypedDataMutation();
+    const { profileQuery } = useLensUser();
+    const sdk = useSDK();
+
+    async function createPost(
+        image: File,
+        title: string,
+        description: string,
+        content: string,
+        classificationMetadata: string
+    ) {
+        const typedData = await requestTypedData({
+            request: {
+                collectModule: { // Set this to be custom DAO contract?
+                    freeCollectModule: {
+                        followerOnly: false,
+                    },
+                },
+                contentURI: 'todo', // IPFS Hash (upload ALL content to IPFS)
+                profileId: profileQuery.data?.defaultProfile?.id,
+            },
+        });
+
+        const {domain, types, value} = typedData.createPostTypedData.typedData;
+        if (!sdk) return;
+
+        // Sign typed data
+        const signature = await signTypedDataWithOmittedTypename(
+            sdk,
+            domain,
+            types,
+            value
+        );
+
+        // Send the transaction data & ipfs hash to the custom publication module
+        // todo
+    }
+
+    //return useMutation(createPost);
+}

pages/publications/create.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import styles from '../../styles/Create.module.css';
+
+export default function Create() {
+    const [image, setImage] = useState<File | null>(null);
+    const [title, setTitle] = useState<string>("");
+    const [description, setDescription] = useState<string>("");
+    const [classificationMetadata, setClassificationMetadata] = useState<string>(""); // Token id (rendering template will add the contract address)
+    const [content, setContent] = useState('');
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.formContainer}>
+                <div className={styles.inputContainer}>
+                    <input type='file' onChange={(e) => {
+                        if (e.target.files) {
+                            setImage(e.target.files[0]);
+                        }
+                    }} />
+                </div>
+                <div className={styles.inputContainer}>
+                    <input
+                        type='text'
+                        placeholder='Title'
+                        onChange={(e) => setTitle(e.target.value)}
+                    />
+                </div>
+                <div className={styles.inputContainer}>
+                    <textarea 
+                        placeholder='Description'
+                        onChange={(e) => setDescription(e.target.value)}
+                    />
+                </div>
+                <div className={styles.inputContainer}>
+                    <textarea 
+                        placeholder='Content'
+                        onChange={(e) => setContent(e.target.value)}
+                    />
+                </div>
+                <div className={styles.inputContainer}>
+                    <input
+                        type='text'
+                        placeholder='NFT id'
+                        onChange={(e) => setClassificationMetadata(e.target.value)}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+};

styles/Create.module.css

@@ -15,5 +15,5 @@
     padding: 16px;
     margin: 16px;
     border-radius: 16px;
-    border: 1px solid white;
+    border: 1px solid black;
 }

styles/Header.module.css

@@ -20,6 +20,13 @@
     margin-top: -12px;
 }
 
+.left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 40px;
+}
+
 .right {
     margin-right: 16px;
     margin-top: 5px;