From f6118c354c9e178b5f314122751a2bfaae2cb186 Mon Sep 17 00:00:00 2001 From: ankushKun Date: Sun, 30 Jun 2024 10:52:04 +0530 Subject: [PATCH] home screen update --- next_app/src/components/ao/landing.tsx | 134 +++++++++++++----- .../components/ao/new-ao-project-dialog.tsx | 17 ++- next_app/src/components/ao/packages.tsx | 2 +- next_app/src/components/side-bar.tsx | 43 +++--- next_app/src/styles/globals.css | 8 +- 5 files changed, 146 insertions(+), 58 deletions(-) diff --git a/next_app/src/components/ao/landing.tsx b/next_app/src/components/ao/landing.tsx index 1044d1a..db0a8fb 100644 --- a/next_app/src/components/ao/landing.tsx +++ b/next_app/src/components/ao/landing.tsx @@ -1,20 +1,20 @@ -import {toast} from "sonner" +import { toast } from "sonner" import { Button } from "../ui/button" import { useEffect, useState } from "react"; import { useLocalStorage } from "usehooks-ts"; import Link from "next/link"; -import { AlertTriangleIcon, InfoIcon } from "lucide-react"; +import { AlertTriangleIcon, FileCodeIcon, FolderOpen, InfoIcon, NewspaperIcon, PartyPopper, PlusSquare } from "lucide-react"; const words = [ - "winston", - "dumdum", - "pikachu", - "bulbasaur", - "charmander", - "squirtle", - "jigglypuff", - "buildooor", + // "winston", + // "dumdum", + // "pikachu", + // "bulbasaur", + // "charmander", + // "squirtle", + // "jigglypuff", + // "buildooor", "(^･o･^)ﾉ' ", "ฅ^•ﻌ•^ฅ", "(⁠ ⁠╹⁠▽⁠╹⁠ ⁠)", @@ -32,16 +32,41 @@ const words = [ "⁄⁠(⁠⁄⁠ ⁠⁄⁠•⁠⁄⁠-⁠⁄⁠•⁠⁄⁠ ⁠⁄⁠)⁠⁄" ] -function ContentItem({ title, desc, link }) { - return - {title} - {desc} - -} +const published = [ + { + title: "Installing Packages", + desc: "Learn how to use APM and install packages on processes", + link: "https://mirror.xyz/0xCf673b87aFBed6091617331cC895376209d3b923/M4XoQFFCAKBH54bwIsCFT3Frxd575-plCg2o4H1Tujs" + }, + { + title: "Portable Codecells", + desc: "Learn how to integrate our codecells into your webapps", + link: "https://youtu.be/e7Gx2NdWXLQ?si=hg8Ih7828AsVjpp7" + }, + { + title: "Unit Testing", + desc: "Try writing unit tests for your AO functions", + link: "https://mirror.xyz/0xCf673b87aFBed6091617331cC895376209d3b923/uBgGB-HNhlig7RucAzdSyRjJIJSXCug5NMgN7bXS9qk" + }, + { + title: "BetterIDEa graphs", + desc: "Fetch and plot live crypto prices data using 0rbit oracle and BetterIDEa graphs", + link: "https://ide.betteridea.dev/import?id=2voE0ERMT6CCPRVEkTsotDR-dmHgfoSH6dvucL9rSQc" + } +] + +// function ContentItem({ title, desc, link }) { +// return +// {title} +// {desc} +// +// } export default function AOLanding() { const [walletAddress, setWalletAddress] = useState(""); const [autoconnect, setAutoconnect] = useLocalStorage("autoconnect", false, { initializeWithValue: true }); + const [recents, setRecents] = useLocalStorage("recents", [], { initializeWithValue: true }); + const [showUpdates, setShowUpdates] = useState(false); async function connectWallet() { if (!window.arweaveWallet) @@ -55,7 +80,7 @@ export default function AOLanding() { const addrCropped = addr.slice(0, 9) + "..." + addr.slice(-9); setWalletAddress(addr); // toast({ title: `Connected to ${addrCropped}` }); - toast.success(`Connected to ${addrCropped}`, {id:"connected"}); + toast.success(`Connected to ${addrCropped}`, { id: "connected" }); setAutoconnect(true); } @@ -79,36 +104,75 @@ export default function AOLanding() { }, [autoconnect]); return <> -
-
-
-
Update: If you had notebook files which have become normal files now, please change their filename to .luanb extension
-
Old processes must perform a security update (settings -> patch 6-5-24)
- {/*
All new processes will be spawned with WASM64 support! 🤩
*/} -
-

gm { - words[Math.floor(Math.random() * words.length)] - }

+
+
setShowUpdates(true)} onMouseLeave={()=>setShowUpdates(false)}>UPDATES
+ {showUpdates &&
+
+ +
If you had notebook files which have become normal files now, please change their filename to .luanb extension
+
+ +
Old processes must perform a security update (settings > patch 6-5-24): only for processes spawned prior to AOS 1.11.0
+
All new processes will be spawned with WASM64 support!
+ +
} +
+

BetterIDEa

- Welcome to the intuitive web IDE for building powerful actor oriented applications. + ao's development environment. { + words[Math.floor(Math.random() * words.length)] + }

{!walletAddress && } -
-

Create a new project from the sidebar

-

- Or open an existing one ;) -

+
+ + {/* */}
-
Latest content
+ {/*
Latest content
-
+
*/} +
+
+
+ Recent Projects +
+ { + recents.toReversed().map((pname, i) => ) + } + {recents.length === 0 &&
No recent projects
} +
+
+
+ Freshly Published +
+ { + published.map((post, i) => + ) + } +
+
diff --git a/next_app/src/components/ao/new-ao-project-dialog.tsx b/next_app/src/components/ao/new-ao-project-dialog.tsx index f406375..cebd6b9 100644 --- a/next_app/src/components/ao/new-ao-project-dialog.tsx +++ b/next_app/src/components/ao/new-ao-project-dialog.tsx @@ -146,6 +146,21 @@ export function NewAOProjectDialog({ manager, collapsed, setCollapsed }: { manag } setLoadingProcess(false); setPopupOpen(false); + + const recents = JSON.parse(localStorage.getItem("recents") || "[]") as string[]; + const pname = newProjName; + if (!recents.includes(pname) && recents.length < 5) { + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } else if (!recents.includes(pname) && recents.length >= 5) { + recents.shift(); + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } else if (recents.includes(pname)) { + recents.splice(recents.indexOf(pname), 1); + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } } // make graphql request and append processes with names to this @@ -333,7 +348,7 @@ export function NewAOProjectDialog({ manager, collapsed, setCollapsed }: { manag setPopupOpen(e) }}> - { e.preventDefault() try { diff --git a/next_app/src/components/ao/packages.tsx b/next_app/src/components/ao/packages.tsx index b81d446..7c5520d 100644 --- a/next_app/src/components/ao/packages.tsx +++ b/next_app/src/components/ao/packages.tsx @@ -262,7 +262,7 @@ export default function Packages() { Explore packages - Packages allow you to add extra functionality to your ao processes. To publish your own package visit apm.betteridea.dev + Packages allow you to add extra functionality to your ao processes. To publish your own package visit apm.betteridea.dev
diff --git a/next_app/src/components/side-bar.tsx b/next_app/src/components/side-bar.tsx index 4029f4e..6f212b2 100644 --- a/next_app/src/components/side-bar.tsx +++ b/next_app/src/components/side-bar.tsx @@ -68,18 +68,36 @@ export default function SideBar({ collapsed, setCollapsed, manager }: { collapse let ownerAddress = manager.projects[pname].ownerWallet; return (
-
+
{ + let shortAddress = "unknown"; + if (typeof ownerAddress == "string") shortAddress = ownerAddress.slice(0, 5) + "..." + ownerAddress.slice(-5); + if (!ownedByActiveWallet) toast.error("The owner wallet for this project cant be verified", { description: `It was created with ${shortAddress}.\nSome things might be broken`, id: "error" }); + globalState.setActiveProject(active ? "" : pname); + if (active) return; + const file = Object.keys(manager.projects[pname].files)[0]; + console.log(file); + if (file) globalState.setActiveFile(file); + const recents = JSON.parse(localStorage.getItem("recents") || "[]") as string[]; + if (!recents.includes(pname) && recents.length < 5) { + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } else if (!recents.includes(pname) && recents.length >= 5) { + recents.shift(); + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } else if (recents.includes(pname)) { + recents.splice(recents.indexOf(pname), 1); + recents.push(pname); + localStorage.setItem("recents", JSON.stringify(recents)); + } + }}> { - let shortAddress = "unknown"; - if (typeof ownerAddress == "string") shortAddress = ownerAddress.slice(0, 5) + "..." + ownerAddress.slice(-5); - if (!ownedByActiveWallet) toast.error("The owner wallet for this project cant be verified", { description: `It was created with ${shortAddress}.\nSome things might be broken`, id: "error" }); - globalState.setActiveProject(active ? "" : pname); - }} + onClick={() => document.getElementById(pname)?.click()} /> {!collapsed && ( @@ -87,16 +105,7 @@ export default function SideBar({ collapsed, setCollapsed, manager }: { collapse
{ - let shortAddress = "unknown"; - if (typeof ownerAddress == "string") shortAddress = ownerAddress.slice(0, 5) + "..." + ownerAddress.slice(-5); - if (!ownedByActiveWallet) toast.error("The owner wallet for this project cant be verified", { description: `It was created with ${shortAddress}.\nSome things might be broken`, id: "error" }); - globalState.setActiveProject(active ? "" : pname); - if (active) return; - const file = Object.keys(manager.projects[pname].files)[0]; - console.log(file); - if (file) globalState.setActiveFile(file); - }} + onClick={() => document.getElementById(pname)?.click()} > diff --git a/next_app/src/styles/globals.css b/next_app/src/styles/globals.css index 97bb6f5..372e013 100644 --- a/next_app/src/styles/globals.css +++ b/next_app/src/styles/globals.css @@ -25,8 +25,8 @@ --accent: 240 10% 90%; --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; + --destructive: 0 84.2% 80.2%; + --destructive-foreground: 0 100% 30%; --border: 0 0% 50%; --input: 240 5.9% 90%; @@ -59,8 +59,8 @@ --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; + --destructive: 0 70% 15.6%; + --destructive-foreground: 0 60% 60%; --border: 0 0% 40%; --input: 0 0% 16%;