figured out sharing encoding

next_app/src/components/ao/blueprints.tsx

@@ -40,8 +40,9 @@ export default function Blueprints() {
             if (!project.process) return toast({ title: "Process id missing", description: "The active project doesnot seem to have a process id" });
             setOpen(true);
         }}>
-            <Button variant="ghost" className="p-2 h-10">
+            <Button variant="ghost" className="p-2 h-10 flex flex-col">
                 <Image src={Icons.blueprintSVG} alt="Blueprints" width={25} height={25} />
+                <div className="text-[12px]">BLUEPRINTS</div>
             </Button>
         </DialogTrigger>
         <DialogContent className="">

next_app/src/components/ao/landing.tsx

@@ -1,3 +1,7 @@
+import { toast } from "@/components/ui/use-toast";
+import { Button } from "../ui/button"
+import { useEffect, useState } from "react";
+import { useLocalStorage } from "usehooks-ts";
 
 const words = [
     "winston",
@@ -30,18 +34,50 @@ const cat = `
 `
 
 export default function AOLanding() {
+    const [walletAddress, setWalletAddress] = useState<string>("");
+    const [autoconnect, setAutoconnect] = useLocalStorage("autoconnect", false, { initializeWithValue: true });
+
+    async function connectWallet() {
+        if (!window.arweaveWallet)
+            return toast({
+                title: "No Arweave wallet found",
+                description: "You might want to install ArConnect extension to connect your wallet",
+            });
+        await window.arweaveWallet.connect(["ACCESS_ADDRESS", "SIGN_TRANSACTION"]);
+        const addr = await window.arweaveWallet.getActiveAddress();
+        const addrCropped = addr.slice(0, 9) + "..." + addr.slice(-9);
+        setWalletAddress(addr);
+        toast({ title: `Connected to ${addrCropped}` });
+        setAutoconnect(true);
+    }
+
+    function disconnectWallet() {
+        window.arweaveWallet.disconnect();
+        setAutoconnect(false);
+        setWalletAddress("");
+    }
+
+    useEffect(() => {
+        if (autoconnect) connectWallet();
+        else {
+            disconnectWallet();
+        }
+    }, [autoconnect]);
+
     return <>
-        <section className="container p-24 my-16">
+        <section className="container text-foreground/90 p-24 my-16">
             <div className="flex flex-col gap-5 items-center">
 
                 <h1 className="text-6xl font-bold" suppressHydrationWarning>gm {
                     words[Math.floor(Math.random() * words.length)]
                 }</h1>
 
-                <p className="text-lg text-muted-foreground">
+                <p className="text-lg">
                     Welcome to the intuitive web IDE for building powerful <span className="text-primary">actor oriented</span> applications.
                 </p>
 
+                {!walletAddress && <Button onClick={connectWallet}>Connect Wallet</Button>}
+
                 <div className="flex flex-col text-center gap-x-4 mt-8">
                     <h1 className="px-8">Create a new project from the sidebar</h1>
                     <h1 className="px-8">

next_app/src/components/ao/modules.tsx

@@ -34,8 +34,9 @@ export default function Modules() {
             if (!project.process) return toast({ title: "Process id missing", description: "The active project doesnot seem to have a process id" });
             setOpen(true);
         }}>
-            <Button variant="ghost" className="p-2 h-10">
+            <Button variant="ghost" className="p-2 h-10 flex-col">
                 <Image src={Icons.moduleSVG} alt="Modules" width={25} height={25} className="invert dark:invert-0 opacity-70" />
+                <div className="text-[12px]">MODULES</div>
             </Button>
         </DialogTrigger>
         <DialogContent className="">

next_app/src/components/bottom-statusbar.tsx

@@ -37,11 +37,14 @@ export default function BottomStatusbar() {
 
   useEffect(() => {
     if (autoconnect) connectWallet();
+    else {
+      disconnectWallet();
+    }
   }, [autoconnect]);
 
   return (
     <div className="h-[25px] flex items-center overflow-clip gap-0.5 px-1 text-xs border-t">
-      <Button variant="ghost" data-connected={walletAddress.length > 0} className="p-1 rounded-none data-[connected=false]:text-black data-[connected=false]:bg-btr-green text-xs" onClick={connectWallet}>
+      <Button variant="ghost" data-connected={walletAddress.length > 0} className="p-1 rounded-none data-[connected=false]:text-black data-[connected=false]:bg-primary text-xs" onClick={connectWallet}>
         {walletAddress ? `Connected: ${walletAddress}` : "Connect"}
       </Button>
       {walletAddress.length > 0 && (

next_app/src/components/top-bar.tsx

@@ -11,6 +11,7 @@ import Blueprints from "./ao/blueprints";
 import Modules from "./ao/modules";
 import { useProjectManager } from "@/hooks";
 import { parseOutupt, runLua } from "@/lib/ao-vars";
+import { unescape } from "querystring";
 
 export default function TopBar() {
   const router = useRouter();
@@ -32,27 +33,31 @@ export default function TopBar() {
     delete project.ownerWallet
     delete project.process
 
-    const luaToRun = `_BETTERIDEA_SHARE = '${JSON.stringify(project, (k, v) => {
-      if (typeof v === "string") return v.replaceAll('"', '\\"').replaceAll("'", "\'").replaceAll("\n", "\\n")
-      return v
-    }).toString()}'
-   
-Handlers.add(
-  "Get-Better-IDEa-Share",
-  Handlers.utils.hasMatchingTag("Action","Get-BetterIDEa-Share"),
-  function(msg)
-    ao.send({Target=msg.From, Action="BetterIDEa-Share-Response", Data=_BETTERIDEA_SHARE})
-    return _BETTERIDEA_SHARE
-  end
-)   
-`
+    // const stringProj = JSON.stringify(project, null, 2).replaceAll("\\n","")
+    const urlEncodedJson = encodeURIComponent(JSON.stringify(project)).replaceAll("'", "\\'")
+
+    const luaToRun = `_BETTERIDEA_SHARE = '${urlEncodedJson}'
+
+    Handlers.add(
+      "Get-Better-IDEa-Share",
+      Handlers.utils.hasMatchingTag("Action","Get-BetterIDEa-Share"),
+      function(msg)
+        ao.send({Target=msg.From, Action="BetterIDEa-Share-Response", Data=_BETTERIDEA_SHARE})
+        return _BETTERIDEA_SHARE
+      end
+    )   
+    `
     console.log(luaToRun)
     setSharing(true);
     const res = await runLua(luaToRun, processBackup, [
       { name: "BetterIDEa-Function", value: "Share-Project" }
     ]);
     console.log(res)
 
+    if (res.Error) {
+      return toast({ title: "Error sharing project", description: res.Error });
+    }
+
     const url = `${window.location.origin}/import?id=${processBackup}`;
     navigator.clipboard.writeText(url);
     toast({ title: "Project URL copied", description: "The URL to the project has been copied to your clipboard" });
@@ -108,7 +113,7 @@ Handlers.add(
         </Button> */}
 
         <SwitchCustom
-          className="ml-5"
+          className="ml-5 hidden"
           onCheckedChange={(checked) => {
             globalState.activeMode == "AO" ? globalState.setActiveMode("WARP") : globalState.setActiveMode("AO");
             // checked ? router.replace(`/warp`) : router.replace(`/ao`);

next_app/src/pages/import.tsx

@@ -25,9 +25,9 @@ export default function Import() {
                 ]
             })
             // console.log(r)
-            console.log(r.Messages[0].Data.replaceAll("\n", "\\n"))
-            setData(r.Messages[0].Data.replaceAll("\n", "\\n"))
-            const data = JSON.parse(`${r.Messages[0].Data.replaceAll("\n", "\\n")}`)
+            console.log(decodeURIComponent(r.Messages[0].Data))
+            setData(decodeURIComponent(r.Messages[0].Data))
+            const data = JSON.parse(`${decodeURIComponent(r.Messages[0].Data)}`)
             console.log(data)
             try {
                 await window.arweaveWallet.getActiveAddress()

next_app/src/styles/globals.css

@@ -37,8 +37,8 @@
 
     .dark {
         /* Done */
-        --background: 0 0% 2%;
-        --foreground: 0 0% 70%;
+        --background: 0 0% 5%;
+        --foreground: 0 0% 90%;
 
         --card: 240 10% 3.9%;
         --card-foreground: 0 0% 98%;