some ui/ux updates

Author: Manuel Bichler

additional.d.ts

@@ -0,0 +1,6 @@
+declare global {
+  interface Window {
+    ethereum?: import("ethers").providers.ExternalProvider;
+  }
+}
+export {};

package.json

@@ -20,16 +20,19 @@
     "@web3auth/base": "^4.0.0",
     "@web3auth/modal": "^4.2.3",
     "@web3auth/openlogin-adapter": "^4.2.0",
+    "boring-avatars": "^1.7.0",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.4",
     "ethers": "^5.7.2",
     "next": "13.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.42.1",
+    "tailwind-merge": "^1.8.1",
     "typescript": "4.9.4"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@types/elliptic": "^6.4.14",
     "autoprefixer": "^10.4.13",

pnpm-lock.yaml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/favicon/android-chrome-72x72.png

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

public/favicon/apple-touch-icon.png

@@ -0,0 +1,49 @@
+import { classNames } from "@/utils/classNames";
+import * as React from "react";
+import { twMerge } from "tailwind-merge";
+
+const variants = {
+  primary: "bg-indigo-600 text-white hover:bg-indigo-700 ",
+  white: "border border-gray-300 hover:bg-gray-50 text-gray-700",
+};
+
+const sizes = {
+  md: "py-2 px-4 text-sm",
+  lg: "py-2 px-4 text-base",
+  xl: "py-3 px-6 text-base",
+};
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: keyof typeof variants;
+  size?: keyof typeof sizes;
+  isLoading?: boolean;
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      type = "button",
+      className = "",
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      ...props
+    },
+    ref
+  ) => {
+    const clNames = classNames(
+      "flex justify-center items-center disabled:opacity-70 disabled:cursor-not-allowed rounded-md shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
+      variants[variant],
+      sizes[size]
+    );
+    const mergedClassNames = twMerge(clNames, className);
+    return (
+      <button ref={ref} type={type} className={mergedClassNames} {...props}>
+        {/* {isLoading && <Spinner size="sm" className="text-current" />} */}
+        <span className="mx-2">{props.children}</span>
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";

public/favicon/browserconfig.xml

@@ -1,39 +1,66 @@
+import { Button } from "@/components/button";
 import lighthouse from "@lighthouse-web3/sdk";
+import { ethers } from "ethers";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 export function AddPaperForm() {
-  const [paperFile, setPaperFile] = useState(null);
+  const [data, setData] = useState(null);
+  const [encrypted, setEncrypted] = useState(false);
 
   const { register, handleSubmit } = useForm();
 
-  const onSubmit = async (data) => {
-    if (!paperFile) throw Error("No file selected");
-    const fileUrl = await deployImage();
-    console.log("fileUrl :>> ", fileUrl);
-    console.log("data :>> ", data);
+  const encryptionSignature = async () => {
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const signer = provider.getSigner();
+    const address = await signer.getAddress();
+    const messageRequested = (await lighthouse.getAuthMessage(address)).data
+      .message;
+    const signedMessage = await signer.signMessage(messageRequested);
+    return {
+      signedMessage: signedMessage,
+      publicKey: address,
+    };
   };
 
-  const onChangePaperFile = (e) => {
-    setPaperFile(URL.createObjectURL(e.target.files[0]));
+  //percentage of upload data done
+  const progressCallback = (progressData) => {
+    const total = progressData?.total;
+    const uploaded = progressData?.uploaded;
+    const percentageToBeDone = parseInt((total / uploaded).toFixed(2));
+    let percentageDone = 100 - percentageToBeDone;
+    console.log("percentageDone", percentageDone);
   };
 
-  const deployImage = async () => {
-    const progressCallback = (progressData) => {
-      const total = progressData?.total;
-      const uploaded = progressData?.uploaded;
-      const percentageToBeDone = parseInt((total / uploaded).toFixed(2));
-      let percentageDone = 100 - percentageToBeDone;
-      console.log("percentageDone", percentageDone);
-    };
+  const onSubmit = async (data) => {
+    if (!data) throw Error("No file selected");
+    const fileUrl = await uploadData();
+    console.log("fileUrl :>> ", fileUrl);
+  };
 
-    const output = await lighthouse.upload(
-      paperFile,
+  const uploadData = async () => {
+    // upload encrypted file to IPFS and return the url
+    if (encrypted) {
+      const sig = await encryptionSignature();
+      const response = await lighthouse.uploadEncrypted(
+        data,
+        sig.publicKey,
+        process.env.NEXT_PUBLIC_LIGHTHOUSE_API_KEY,
+        sig.signedMessage,
+        progressCallback
+      );
+      const url = `https://gateway.lighthouse.storage/ipfs/${response.data.Hash}`;
+      console.log("Encrypted FileUrl: ", url);
+      return url;
+    }
+    // upload unencrypted file to IPFS and return the url
+    const response = await lighthouse.upload(
+      data,
       process.env.NEXT_PUBLIC_LIGHTHOUSE_API_KEY,
       progressCallback
     );
-    console.log("File Status:", output);
-    const url = `Visit at https://gateway.lighthouse.storage/ipfs/${output.data.Hash}`;
+    const url = `Vhttps://gateway.lighthouse.storage/ipfs/${response.data.Hash}`;
+    console.log("File URL: ", url);
     return url;
   };
 
@@ -44,7 +71,7 @@ export function AddPaperForm() {
     // Display response
     console.log("ACCESSCON:", response);
   };
-
+  console.log("encrypted :>>", encrypted);
   return (
     <div className="px-4 pt-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
       <div className="flex flex-col">
@@ -104,7 +131,33 @@ export function AddPaperForm() {
                     />
                   </div>
                 </div>
+                <div className="sm:col-span-4">
+                  <div className="flex items-start h-">
+                    <input
+                      id="encrypt"
+                      aria-describedby="encrypt-description"
+                      name="encrypt"
+                      type="checkbox"
+                      onChange={() => setEncrypted(!encrypted)}
+                      className="w-4 h-4 mt-[0.5px] text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+                    />
 
+                    <div className="ml-3 text-sm">
+                      <label
+                        htmlFor="encrypt"
+                        className="font-medium text-gray-700"
+                      >
+                        Encrypt data
+                      </label>
+                      <p id="encrypt-description" className="text-gray-500">
+                        The data will be encrypted before being stored on the
+                        IPFS public network. Meaning it can only be accessed by
+                        the persons who have the key to decrypt the data once
+                        downloaded.
+                      </p>
+                    </div>
+                  </div>
+                </div>
                 <div className="sm:col-span-6">
                   <label
                     htmlFor="cover-photo"
@@ -138,7 +191,7 @@ export function AddPaperForm() {
                             id="file-upload"
                             name="file-upload"
                             type="file"
-                            onChange={(e) => setPaperFile(e)}
+                            onChange={(e) => setData(e)}
                             className="sr-only"
                           />
                         </label>
@@ -154,18 +207,12 @@ export function AddPaperForm() {
 
           <div className="pt-5">
             <div className="flex justify-end">
-              <button
-                type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
+              <Button type="button" variant="white">
                 Clear form
-              </button>
-              <button
-                type="submit"
-                className="inline-flex justify-center px-4 py-2 ml-3 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
+              </Button>
+              <Button type="submit" className="inline-flex justify-center ml-3">
                 Save Paper
-              </button>
+              </Button>
             </div>
           </div>
         </form>