Merge pull request #35 from permaweb/jfrain99/vouch-before-stamp

feat(specs): if not vouched, vouch before stamping

src/dal/index.ts

@@ -52,7 +52,7 @@ const stampCountSchema = z.function().args(z.string())
 const isVouchedSchema = z
   .function()
   .args(z.string())
-  .returns(z.promise(z.boolean()))
+  .returns(z.promise(z.object({ addr: z.string(), vouched: z.boolean() })))
 
 const querySchema = z.function().args(z.string()).returns(z.promise(z.array(AoSpecSchema.optional())))
 
@@ -71,7 +71,13 @@ const uploadSchema = z
       tags: z.array(z.object({ name: z.string(), value: z.union([z.string(), z.array(z.string())]) }))
     })
   )
-  .returns(z.promise(z.string()))
+  .returns(z.promise(
+      z.object({
+        status: z.string(),
+        error: z.string().nullish(),
+        txId: z.string().nullish()
+    })
+  ))
 
 type Services = {
   connect: z.infer<typeof getActiveAddressSchema>

src/lib/index.ts

@@ -43,6 +43,7 @@ export default {
     const query = fromPromise(querySchema.implement(services.query))
     const queryRelated = fromPromise(queryRelatedSchema.implement(services.queryRelated))
     const stamp = fromPromise(stampSchema.implement(services.stamp))
+    const isVouched = fromPromise(isVouchedSchema.implement(services.isVouched))
     const stampCounts = fromPromise(stampCountsSchema.implement(services.stampCounts))
 
     return {
@@ -161,12 +162,21 @@ export default {
           )
           .map(uniqBy(prop("id")))
         },
-      stamp: (tx: string) => 
-        connect()
-          //.chain(isVouched) // isVouched
+      stamp: (tx: string) => {
+        return connect()
+          .chain(isVouched) 
+          .chain(({ addr, vouched }) => {
+            if (vouched) {
+              return Resolved({ addr })
+            }
+            return Rejected('Not Vouched')
+          })
           .chain(
-            (addr: string) => stamp(tx, addr)
-          ),
+            ({ addr }) => {
+              return stamp(tx, addr)
+            },
+          )
+        }
     }
   },
 }

src/pages/form/index.tsx

@@ -122,10 +122,10 @@ const EditorComponent: preact.FunctionComponent<Props> = ({ tx }) => {
   };
 
   useEffect(() => {
-    if (current === "ready" && !loaded && context.spec && context.spec[0]) {
+    if (current === "ready" && !loaded && context.spec) {
       setLoaded(true);
 
-      const specData = context.spec[0];
+      const specData = context.spec;
 
       setSpecMeta({
         Title: specData.Title,
@@ -138,7 +138,7 @@ const EditorComponent: preact.FunctionComponent<Props> = ({ tx }) => {
       });
 
       if (editor && editor.value() === "") {
-        editor.value(specData.html)
+        editor.value(specData.body)
       }
     }
 
@@ -193,7 +193,7 @@ const EditorComponent: preact.FunctionComponent<Props> = ({ tx }) => {
               </p>
             </div>
             <button class="btn btn-outline btn-block btn-error" onClick={() => {
-              route("/", true)
+              route(`/view/${context.txId}`)
             }}>
               ok
             </button>

src/pages/form/service.ts

@@ -10,6 +10,7 @@ import yaml from 'js-yaml'
 import services from "../../services"
 import Api from "../../lib"
 import { FormMachineContext, FormMachineCurrent, FormMachineEvent, FormMachineSend } from "./types"
+import { ZodError } from "zod"
 
 const api = Api.init(services)
 
@@ -33,7 +34,7 @@ const machine = createMachine({
       "done",
       "ready",
       reduce((ctx: FormMachineContext, ev: FormMachineEvent) => {
-        return { ...ctx, spec: ev.data }
+        return { ...ctx, spec: ev.data[0] ? { ...ev.data[0], body: ev.data[0].html } : ev.data }
       }),
     ),
   ),
@@ -60,17 +61,22 @@ const machine = createMachine({
 
   ${ctx.md}`,
         )
-        // add saved doc to local cache -- hold for now...
-        //.map(({ id }) => (cache.update(assoc(id, ctx.md)), { id }))
-        .map(({ id }) => ({ ...ctx, id }))
         .toPromise()
       },
-    transition("done", "confirm"),
+    transition(
+      "done",
+      "confirm",
+      reduce((ctx: FormMachineContext, ev: FormMachineEvent) => {
+        const { txId } = ev.data as { txId?: string }
+        return { ...ctx, txId }
+      }),
+    ),
     transition(
       "error",
       "ready",
       reduce((ctx: FormMachineContext, ev: FormMachineEvent) => {
-        return { ...ctx, error: ev.error }
+        const { error } = ev.data as { error?: string }
+        return { ...ctx, saveError: error }
       }),
     ),
   ),

src/pages/form/types.ts

@@ -4,19 +4,22 @@ import { ZodError } from "zod"
 export interface FormMachineContext {
   type?: string
   tx?: string | null
+  txId?: string | null
   spec?: FormSpec
   md?: string
   metadata?: Metadata
   error?: ZodError
+  saveError?: string
   id?: string
 }
 
 export interface FormMachineEvent {
   type: string
   md?: string
-  data?: FormSpec
+  data?: FormSpec | { txId?: string, error?: string }
   metadata?: Metadata
   error?: ZodError
+  saveError?: string
   [key: string]: unknown
 }
 

src/pages/home/index.tsx

@@ -9,14 +9,19 @@ import Loading from '../../components/loading'
 
 const HomePage = () => {
   const [showError, setShowError] = useState(false)
+  const [showVouchModal, setShowVouchModal] = useState(false)
   const [copying, setCopying] = useState(false)
 
   const s = useHomeService()
 
   const send = s[1]
   const context = useMemo(() => {
     if (s[0].context?.error) {
-      setShowError(true)
+      if (s[0].context.error.message === 'Not Vouched') {
+        setShowVouchModal(true)
+      } else {
+        setShowError(true)
+      }
     }
     return s[0].context
   }, [s])
@@ -121,7 +126,7 @@ const HomePage = () => {
           tx={context?.selected?.id}
         />
       </div>
-
+      <input type="checkbox" id="error-modal" checked={showError} className="modal-toggle" onChange={() => setShowError(!showError)} />
       {showError && (
         <div className="modal">
           <div className="modal-box w-[300px] px-8 py-16 mx-4 space-y-8">
@@ -140,6 +145,34 @@ const HomePage = () => {
           </div>
         </div>
       )}
+      <input type="checkbox" id="vouch-modal" checked={showVouchModal} className="modal-toggle" onChange={() => setShowVouchModal(!showVouchModal)} />
+      {showVouchModal && (
+        <div className="modal">
+          <div className="modal-box w-[600px] px-8 py-8 mx-4 space-y-8">
+            <h3 className="text-xl">You are not vouched!</h3>
+            <div className="text-md">You must be vouched to stamp Specs.</div>
+            <button
+              className="btn btn-outline btn-block"
+              onClick={() => {
+                window.open('https://vouch-portal.arweave.net/#/intent/vouch-goal?value=2&currency=USD&profileId=L3jAPxvy_3GnFCS_TYVPpfqdw7usO5QsDzDNZmIFVg8&appLink=https%3A%2F%2Fspecs.arweave.net%2F', '_blank')
+                send('reset')
+                setShowVouchModal(false)
+              }}
+            >
+              get vouched
+            </button>
+            <button
+              className="btn btn-outline btn-block"
+              onClick={() => {
+                send('reset')
+                setShowVouchModal(false)
+              }}
+            >
+              close
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/pages/home/service.ts

@@ -50,7 +50,6 @@ const machine = createMachine({
     transition(
       "done",
       "view",
-      // TODO: fix this type when stamping is working
       reduce((ctx: HomeMachineContext, ev: { data: number }) => {
         const specs = ctx.specs.map((s) =>
           s.id === ctx.selected.id ? assoc("stamps", ev.data, s) : s,

src/pages/show/index.tsx

@@ -8,11 +8,16 @@ const shortHash = (h: string) => `${take(5, h)}...${takeLast(5, h)}`
 
 const ShowPage = ({ tx, parent = false }: { tx: string, parent?: boolean }) => {
   const [showError, setShowError] = useState<boolean>(false)
+  const [showVouchModal, setShowVouchModal] = useState<boolean>(false)
   const s = useShowService()
   const send = s[1]
   const context = useMemo(() => {
     if (s[0].context?.error) {
-      setShowError(true)
+      if (s[0].context.error.message === 'Not Vouched') {
+        setShowVouchModal(true)
+      } else {
+        setShowError(true)
+      }
     }
     return s[0].context
   }, [s])
@@ -158,6 +163,34 @@ const ShowPage = ({ tx, parent = false }: { tx: string, parent?: boolean }) => {
           </div>
         </div>
       )}
+      <input type="checkbox" id="vouch-modal" checked={showVouchModal} className="modal-toggle" onChange={() => setShowVouchModal(!showVouchModal)} />
+      {showVouchModal && (
+        <div className="modal">
+          <div className="modal-box w-[600px] px-8 py-8 mx-4 space-y-8">
+            <h3 className="text-xl">You are not vouched!</h3>
+            <div className="text-md">You must be vouched to stamp Specs.</div>
+            <button
+              className="btn btn-outline btn-block"
+              onClick={() => {
+                window.open('https://vouch-portal.arweave.net/#/intent/vouch-goal?value=2&currency=USD&profileId=L3jAPxvy_3GnFCS_TYVPpfqdw7usO5QsDzDNZmIFVg8&appLink=https%3A%2F%2Fspecs.arweave.net%2F', '_blank')
+                send('reset')
+                setShowVouchModal(false)
+              }}
+            >
+              get vouched
+            </button>
+            <button
+              className="btn btn-outline btn-block"
+              onClick={() => {
+                send('reset')
+                setShowVouchModal(false)
+              }}
+            >
+              close
+            </button>
+          </div>
+        </div>
+      )}
     </>
   )
 }