view on ao link

betteridea-dev · Jul 19, 2024 · e1ec4d5 · e1ec4d5
1 parent 6df747d
commit e1ec4d5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/next_app/src/components/drawer/components/interact.tsx b/next_app/src/components/drawer/components/interact.tsx
@@ -1,15 +1,17 @@
-import { useGlobalState, useProjectManager } from "@/hooks";
+import { useGlobalState, useProjectManager, useWallet } from "@/hooks";
 import { TDrawerItem } from "."
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useEffect, useState } from "react";
 import { runLua, Tag } from "@/lib/ao-vars";
 import { Delete, Loader, MinusCircle } from "lucide-react";
 import { toast } from "sonner";
+import Link from "next/link";
 
 function Interact() {
     const manager = useProjectManager();
     const globalState = useGlobalState();
+    const wallet = useWallet()
     const project = globalState.activeProject ? manager.projects[globalState.activeProject] : null;
     const [target, setTarget] = useState<string>(project?.process || "");
     const [inputTags, setInputTags] = useState<Tag[]>([]);
@@ -21,28 +23,32 @@ function Interact() {
     const [data, setData] = useState<string>("");
 
     useEffect(() => {
-        if (!globalState.activeProject) return;
-
         setEqLua(`Send({
     Target = "${target || project?.process}",${action ? `\n\tAction = "${action}",` : ""}${data ? `\n\tData = "${data}",` : ""}${inputTags.length > 0 ? "\n\t" : ""}${inputTags.map(tag => `["${tag.name}"] = "${tag.value}"`).join(",\n\t")}
 })`);
-    }, [target,action, data, inputTags, project, globalState.activeProject]);
+    }, [target, action, data, inputTags, project, globalState.activeProject]);
 
     async function sendMessage() {
         setSendingMessage(true);
         setOutput("...")
-        const res = await runLua(eqLua, project.process);
-        console.log(res);
-        setId((res as any).id);
-        setSendingMessage(false);
-        setOutput(JSON.stringify(res, null, 2));
+        setId("...")
+        try {
+            const res = await runLua(eqLua, project?.process || wallet.address);
+            console.log(res);
+            setId((res as any).id);
+            setSendingMessage(false);
+            setOutput(JSON.stringify(res, null, 2));
+        } catch (e) {
+            setSendingMessage(false);
+            return toast.error(e);
+        }
     }
 
     return <div className="max-h-[calc(100vh-50px)]">
         <h1 className="text-left p-3 text-muted-foreground">INTERACT</h1>
-        <div className="overflow-scroll p-2 flex flex-col gap-2">
-            <Input placeholder={`Target (${project?.process})`} onChange={(e)=>setTarget(e.target.value)} />
-            <Input placeholder="Action"  onChange={(e)=>setAction(e.target.value)}/>
+        {globalState.activeProject ? <div className="overflow-scroll p-2 pt-0 flex flex-col gap-2">
+            <Input placeholder={`Target (${project?.process})`} onChange={(e) => setTarget(e.target.value)} />
+            <Input placeholder="Action" onChange={(e) => setAction(e.target.value)} />
             <Input placeholder="Data" onChange={(e) => setData(e.target.value)} />
             <span className="text-sm text-muted-foreground">Tags:</span>
             {
@@ -61,14 +67,14 @@ function Interact() {
                         const tags = [...inputTags];
                         tags.splice(i, 1);
                         setInputTags(tags);
-                    }}><MinusCircle size={18}/></Button>
+                    }}><MinusCircle size={18} /></Button>
                 </div>)
             }
             <div className="flex gap-1">
                 <Input placeholder="Name" id="input-tag-name-1" />
                 <Input placeholder="Value" id="input-tag-value-1" />
                 <Button onClick={() => {
-                    const name = (document.getElementById("input-tag-name-1") as HTMLInputElement)?.value ;
+                    const name = (document.getElementById("input-tag-name-1") as HTMLInputElement)?.value;
                     const value = (document.getElementById("input-tag-value-1") as HTMLInputElement)?.value;
                     if (!name || !value) return toast.error("Name and Value are required");
                     setInputTags([...inputTags, { name, value }]);
@@ -78,10 +84,10 @@ function Interact() {
             </div>
             <span className="text-sm text-muted-foreground">Eequivalent Lua code:</span>
             <pre className="text-xs overflow-scroll border border-border/40 p-2 rounded-md">{eqLua}</pre>
-            <Button onClick={sendMessage} disabled={sendingMessage}>Send Message {sendingMessage&& <Loader size={18} className="animate-spin ml-1.5"/>}</Button>
-            <span className="text-sm text-muted-foreground">Result: <pre className="overflow-scroll">{id || "..."}</pre></span>
+            <Button onClick={sendMessage} disabled={sendingMessage}>Send Message {sendingMessage && <Loader size={18} className="animate-spin ml-1.5" />}</Button>
+            <span className="text-sm text-muted-foreground">Result: {id && id != "..." && <Link className="text-primary" href={`https://www.ao.link/#/message/${id}`} target="_blank">View on ao.link</Link>} <pre className="overflow-scroll">{id || "..."}</pre></span>
             <pre className="text-xs overflow-scroll border border-border/40 p-2 rounded-md">{output || "..."}</pre>
-        </div>
+        </div> : <div className="p-2 text-muted text-center">No active project</div>}
     </div>
 }
 

diff --git a/next_app/src/components/views/components/editor/components/interact.tsx b/next_app/src/components/views/components/editor/components/interact.tsx
@@ -5,6 +5,7 @@ import { useGlobalState, useProjectManager } from "@/hooks"
 import { runLua, Tag } from "@/lib/ao-vars"
 import { AlertDialogCancel } from "@radix-ui/react-alert-dialog"
 import { Loader, LoaderIcon } from "lucide-react"
+import Link from "next/link"
 import { useEffect, useMemo, useState } from "react"
 import { toast } from "sonner"
 import { useSessionStorage } from "usehooks-ts"
@@ -31,15 +32,16 @@ export default function Interact() {
 
     useEffect(() => {
         if (!globalState.activeProject) return
-        
+
         setEqLua(`Send({
-    Target = "${target||project?.process}",${action?`\n\tAction = "${action}",`:""}${data?`\n\tData = "${data}",`:""}${inputTags.length > 0 ? "\n\t" : ""}${inputTags.map(tag => `["${tag.name}"] = "${tag.value}"`).join(",\n\t")}
+    Target = "${target || project?.process}",${action ? `\n\tAction = "${action}",` : ""}${data ? `\n\tData = "${data}",` : ""}${inputTags.length > 0 ? "\n\t" : ""}${inputTags.map(tag => `["${tag.name}"] = "${tag.value}"`).join(",\n\t")}
 })`)
-    }, [target,action, data, inputTags, project, globalState.activeProject])
+    }, [target, action, data, inputTags, project, globalState.activeProject])
 
     async function sendMessage() {
         setSendingMessage(true)
         setOutput("...")
+        setId("...")
         const res = await runLua(eqLua, project.process)
         setSendingMessage(false)
         setId((res as any).id)
@@ -51,9 +53,9 @@ export default function Interact() {
         <div className="grid grid-cols-2 gap-2">
             <div>
                 {/* <div className="flex gap-2 mb-2"> */}
-                    <Input placeholder={`Target (${project?.process })`}  onChange={(e)=>setTarget(e.target.value)} className="rounded-none mb-2" />
-                    <Input placeholder="Action" onChange={(e) => setAction(e.target.value)} className="rounded-none mb-2" />
-                    <Input placeholder="Data" onChange={(e) => setData(e.target.value)} className="rounded-none mb-2" />
+                <Input placeholder={`Target (${project?.process})`} onChange={(e) => setTarget(e.target.value)} className="rounded-none mb-2" />
+                <Input placeholder="Action" onChange={(e) => setAction(e.target.value)} className="rounded-none mb-2" />
+                <Input placeholder="Data" onChange={(e) => setData(e.target.value)} className="rounded-none mb-2" />
                 {/* </div> */}
                 {
                     inputTags.map((tag, i) => <div key={i} className="flex gap-2 mb-2">
@@ -99,8 +101,8 @@ export default function Interact() {
             </div>
             <div>
                 <Button className="w-full rounded-none" disabled={sendingMessage}
-                    onClick={sendMessage}>Send Message {sendingMessage&&<Loader size={18} className="animate-spin ml-1"/> }</Button>
-                <span className="text-sm text-muted-foreground mt-4">Result: <pre>{id}</pre></span>
+                    onClick={sendMessage}>Send Message {sendingMessage && <Loader size={18} className="animate-spin ml-1" />}</Button>
+                <span className="text-sm text-muted-foreground">Result: {id && id != "..." && <Link className="text-primary" href={`https://www.ao.link/#/message/${id}`} target="_blank">View on ao.link</Link>} <pre className="overflow-scroll">{id || "..."}</pre></span>
                 <pre className="border border-border/30 overflow-scroll mb-2 text-xs rounded-none p-2">
                     {output}
                 </pre>