Sharing Basics Outline

.env

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_MOD_PROTOCOL_API_URL = 'https://api.modprotocol.org/api'
 NEXT_PUBLIC_APP_NAME = "Nounspace"
 NEXT_PUBLIC_WALLET_CONNECT_ID = "ca568706fd42f2029d21f486df16364f"
-NEXT_PUBLIC_HUB_HTTP_URL="https://hub-api.neynar.com"
+NEXT_PUBLIC_HUB_HTTP_URL="https://hub-api.neynar.com"
+PINATA_GATEWAY = "nounspace.mypinata.cloud"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Nounspace",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "",
   "private": true,
   "scripts": {
@@ -119,6 +119,7 @@
     "neverthrow": "^6.2.2",
     "next": "14.1",
     "next-themes": "^0.3.0",
+    "pinata": "^1.4.1",
     "pino-pretty": "^11.2.0",
     "prop-types": "^15.8.1",
     "radix-colors-for-tailwind": "^2.0.0",

src/common/components/organisms/FidgetSettingsEditor.tsx

@@ -5,7 +5,11 @@ import {
   FidgetFieldConfig,
 } from "@/common/fidgets";
 import BackArrowIcon from "../atoms/icons/BackArrow";
-import { FaTrashCan, FaTriangleExclamation } from "react-icons/fa6";
+import {
+  FaShareNodes,
+  FaTrashCan,
+  FaTriangleExclamation,
+} from "react-icons/fa6";
 import { Button } from "@/common/components/atoms/button";
 import {
   Tabs,
@@ -23,10 +27,23 @@ import {
   analytics,
   AnalyticsEvent,
 } from "@/common/providers/AnalyticsProvider";
+import Modal from "@/common/components/molecules/Modal";
+import Spinner from "../atoms/spinner";
+import axiosBackend from "@/common/data/api/backend";
+import { useAppStore } from "@/common/data/stores/app";
+import { isUndefined } from "lodash";
+import { signSignable } from "@/common/lib/signedFiles";
+import {
+  SharedContentDetails,
+  SharedContentInfo,
+  SharedContentResponse,
+} from "@/pages/api/space/shared";
+import moment from "moment";
 
 export type FidgetSettingsEditorProps = {
   fidgetId: string;
   readonly properties: FidgetProperties;
+  readonly fidgetType: string;
   settings: FidgetSettings;
   onSave: (settings: FidgetSettings, shouldUnselect?: boolean) => void;
   unselect: () => void;
@@ -127,12 +144,18 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
   fidgetId,
   properties,
   settings,
+  fidgetType,
   onSave,
   unselect,
   removeFidget,
 }) => {
+  const { getIdentity } = useAppStore((s) => ({
+    getIdentity: s.account.getCurrentIdentity,
+  }));
   const [showConfirmCancel, setShowConfirmCancel] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
   const [state, setState] = useState<FidgetSettings>(settings);
+  const [sharedURL, setSharedUrl] = useState<string>();
 
   useEffect(() => {
     setState(settings);
@@ -146,6 +169,52 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
     });
   };
 
+  const openShareModal = async () => {
+    const identity = getIdentity();
+    setShowShareModal(true);
+    if (isUndefined(identity)) {
+      setSharedUrl("NOT LOGGED IN");
+    } else {
+      const unsignedPostDetails: Omit<SharedContentInfo, "signature" | "cid"> =
+        {
+          publicKey: identity.rootKeys.publicKey,
+          name: "",
+          timestamp: moment().toISOString(),
+        };
+      const unsignedFidgetData: Omit<SharedContentDetails, "signature"> = {
+        type: "fidget",
+        content: {
+          settings,
+          fidgetType,
+        },
+        author: identity.rootKeys.publicKey,
+      };
+      try {
+        const resp = await axiosBackend.post<SharedContentResponse>(
+          "/api/space/shared/",
+          {
+            metadata: signSignable(
+              unsignedPostDetails,
+              identity.rootKeys.privateKey,
+            ),
+            content: signSignable(
+              unsignedFidgetData,
+              identity.rootKeys.privateKey,
+            ),
+          },
+        );
+        const cid = resp.data.value?.contentInfo.cid;
+        setSharedUrl(
+          cid
+            ? `https://nounspace.com/share/${cid}`
+            : "Error occurred, no CID returned",
+        );
+      } catch (e) {
+        setSharedUrl("Failed to create sharable link");
+      }
+    }
+  };
+
   // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
   // const onKeyDown = (event: React.KeyboardEvent<HTMLFormElement>): void => {
   //   if (event.key === "Enter") {
@@ -161,120 +230,134 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
   );
 
   return (
-    <form
-      onSubmit={_onSave}
-      className="flex-col flex h-full"
-      // onKeyDown={onKeyDown}
-    >
-      <div className="h-full overflow-auto">
-        <div className="flex pb-4 m-2">
-          <button onClick={unselect} className="my-auto">
-            <BackArrowIcon />
-          </button>
-          <h1 className="capitalize text-lg pl-4">
-            Edit {properties.fidgetName} Fidget
-          </h1>
-        </div>
-        <div className="gap-3 flex flex-col">
-          <Tabs defaultValue="settings">
-            <TabsList className={tabListClasses}>
-              <TabsTrigger value="settings" className={tabTriggerClasses}>
-                Settings
-              </TabsTrigger>
-              {groupedFields.style.length > 0 && (
-                <TabsTrigger value="style" className={tabTriggerClasses}>
-                  Style
-                </TabsTrigger>
-              )}
-              {groupedFields.code.length > 0 && (
-                <TabsTrigger value="code" className={tabTriggerClasses}>
-                  Code
+    <>
+      <Modal open={showShareModal} setOpen={setShowShareModal}>
+        {sharedURL ? sharedURL : <Spinner />}
+      </Modal>
+      <form
+        onSubmit={_onSave}
+        className="flex-col flex h-full"
+        // onKeyDown={onKeyDown}
+      >
+        <div className="h-full overflow-auto">
+          <div className="flex pb-4 m-2">
+            <button onClick={unselect} className="my-auto">
+              <BackArrowIcon />
+            </button>
+            <h1 className="capitalize text-lg pl-4">
+              Edit {properties.fidgetName} Fidget
+            </h1>
+          </div>
+          <div className="gap-3 flex flex-col">
+            <Tabs defaultValue="settings">
+              <TabsList className={tabListClasses}>
+                <TabsTrigger value="settings" className={tabTriggerClasses}>
+                  Settings
                 </TabsTrigger>
-              )}
-            </TabsList>
-            <TabsContent value="settings" className={tabContentClasses}>
-              <FidgetSettingsGroup
-                fidgetId={fidgetId}
-                fields={groupedFields.settings}
-                state={state}
-                setState={setState}
-                onSave={onSave}
-              />
-            </TabsContent>
-            {groupedFields.style.length > 0 && (
-              <TabsContent value="style" className={tabContentClasses}>
-                <FidgetSettingsGroup
-                  fidgetId={fidgetId}
-                  fields={groupedFields.style}
-                  state={state}
-                  setState={setState}
-                  onSave={onSave}
-                />
-              </TabsContent>
-            )}
-            {groupedFields.code.length > 0 && (
-              <TabsContent value="code" className={tabContentClasses}>
+                {groupedFields.style.length > 0 && (
+                  <TabsTrigger value="style" className={tabTriggerClasses}>
+                    Style
+                  </TabsTrigger>
+                )}
+                {groupedFields.code.length > 0 && (
+                  <TabsTrigger value="code" className={tabTriggerClasses}>
+                    Code
+                  </TabsTrigger>
+                )}
+              </TabsList>
+              <TabsContent value="settings" className={tabContentClasses}>
                 <FidgetSettingsGroup
                   fidgetId={fidgetId}
-                  fields={groupedFields.code}
+                  fields={groupedFields.settings}
                   state={state}
                   setState={setState}
                   onSave={onSave}
                 />
               </TabsContent>
-            )}
-          </Tabs>
+              {groupedFields.style.length > 0 && (
+                <TabsContent value="style" className={tabContentClasses}>
+                  <FidgetSettingsGroup
+                    fidgetId={fidgetId}
+                    fields={groupedFields.style}
+                    state={state}
+                    setState={setState}
+                    onSave={onSave}
+                  />
+                </TabsContent>
+              )}
+              {groupedFields.code.length > 0 && (
+                <TabsContent value="code" className={tabContentClasses}>
+                  <FidgetSettingsGroup
+                    fidgetId={fidgetId}
+                    fields={groupedFields.code}
+                    state={state}
+                    setState={setState}
+                    onSave={onSave}
+                  />
+                </TabsContent>
+              )}
+            </Tabs>
+          </div>
         </div>
-      </div>
 
-      <div className="shrink-0 flex flex-col gap-3 pb-8">
-        {showConfirmCancel ? (
-          // Back Button and Exit Button (shows second)
-          <>
-            <div className="pt-2 flex gap-2 items-center justify-center">
+        <div className="shrink-0 flex flex-col gap-3 pb-8">
+          {showConfirmCancel ? (
+            // Back Button and Exit Button (shows second)
+            <>
+              <div className="pt-2 flex gap-2 items-center justify-center">
+                <Button
+                  type="button"
+                  onClick={() => setShowConfirmCancel(false)}
+                  size="icon"
+                  variant="secondary"
+                >
+                  <BackArrowIcon />
+                </Button>
+                <Button
+                  type="button"
+                  onClick={() => {
+                    removeFidget(fidgetId);
+                  }}
+                  variant="destructive"
+                  width="auto"
+                >
+                  <FaTriangleExclamation
+                    className="h-8l shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span className="ml-4 mr-4">Delete</span>
+                </Button>
+              </div>
+            </>
+          ) : (
+            // X Button and Save Button (shows first)
+            <div className="pt-2 gap-2 flex items-center justify-center">
               <Button
                 type="button"
-                onClick={() => setShowConfirmCancel(false)}
+                onClick={() => setShowConfirmCancel(true)}
                 size="icon"
                 variant="secondary"
               >
-                <BackArrowIcon />
+                <FaTrashCan className="h-8l shrink-0" aria-hidden="true" />
               </Button>
+
               <Button
                 type="button"
-                onClick={() => {
-                  removeFidget(fidgetId);
-                }}
-                variant="destructive"
-                width="auto"
+                onClick={() => openShareModal()}
+                size="icon"
+                variant="secondary"
               >
-                <FaTriangleExclamation
-                  className="h-8l shrink-0"
-                  aria-hidden="true"
-                />
-                <span className="ml-4 mr-4">Delete</span>
+                <FaShareNodes className="h-8l shrink-0" aria-hidden="true" />
               </Button>
-            </div>
-          </>
-        ) : (
-          // X Button and Save Button (shows first)
-          <div className="pt-2 gap-2 flex items-center justify-center">
-            <Button
-              type="button"
-              onClick={() => setShowConfirmCancel(true)}
-              size="icon"
-              variant="secondary"
-            >
-              <FaTrashCan className="h-8l shrink-0" aria-hidden="true" />
-            </Button>
 
-            <Button type="submit" variant="primary" width="auto">
-              <div className="flex items-center">Done</div>
-            </Button>
-          </div>
-        )}
-      </div>
-    </form>
+              <Button type="submit" variant="primary" width="auto">
+                <div className="flex items-center">Done</div>
+              </Button>
+            </div>
+          )}
+        </div>
+      </form>
+    </>
   );
 };
 

src/common/data/api/pinata.ts

@@ -0,0 +1,8 @@
+import { PinataSDK } from "pinata";
+
+const pinata = new PinataSDK({
+  pinataJwt: process.env.PINATA_JWT!,
+  pinataGateway: process.env.PINATA_GATEWAY,
+});
+
+export default pinata;

src/common/fidgets/FidgetWrapper.tsx

@@ -75,6 +75,7 @@ export function FidgetWrapper({
     setCurrentFidgetSettings(
       <FidgetSettingsEditor
         fidgetId={bundle.id}
+        fidgetType={bundle.fidgetType}
         properties={bundle.properties}
         settings={settingsWithDefaults}
         onSave={onSave}

src/fidgets/layout/Grid.tsx

@@ -348,7 +348,11 @@ const Grid: LayoutFidget<GridLayoutProps> = ({
         {inEditMode && (
           <button
             onClick={openFidgetPicker}
-            className="z-infinity flex rounded-xl p-2 m-3 px-auto bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2] font-semibold absolute top-0 right-0"
+            className={
+              hasProfile
+                ? "z-infinity flex rounded-xl p-2 m-3 px-auto bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2] font-semibold absolute top-40 right-0"
+                : "z-infinity flex rounded-xl p-2 m-3 px-auto bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2] font-semibold absolute top-0 right-0"
+            }
           >
             <div className="ml-2 ">
               <AddFidgetIcon />