Skip to content

Commit

Permalink
home screen update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankushKun
ankushKun committed Jun 30, 2024
1 parent 5935c85 commit f6118c3
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 58 deletions.
134 changes: 99 additions & 35 deletions next_app/src/components/ao/landing.tsx
View file
Original file line number Diff line number Diff line change
@@ -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･^)ﾉ' ",
"ฅ^•ﻌ•^ฅ",
"(⁠ ⁠╹⁠▽⁠╹⁠ ⁠)",
Expand All @@ -32,16 +32,41 @@ const words = [
"⁄⁠(⁠⁄⁠ ⁠⁄⁠•⁠⁄⁠-⁠⁄⁠•⁠⁄⁠ ⁠⁄⁠)⁠⁄"
]

function ContentItem({ title, desc, link }) {
return <Link href={link} target="_blank" className="flex flex-col items-center gap-2 border p-2 px-4 rounded-md ring-foreground bg-foreground/0 hover:bg-primary/20 active:bg-primary/40 hover:scale-105 active:scale-100 transition-all duration-200">
<span className="font-bold">{title}</span>
<span className="text-sm text-center">{desc}</span>
</Link>
}
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 <Link href={link} target="_blank" className="flex flex-col items-center gap-2 border p-2 px-4 rounded-md ring-foreground bg-foreground/0 hover:bg-primary/20 active:bg-primary/40 hover:scale-105 active:scale-100 transition-all duration-200">
// <span className="font-bold">{title}</span>
// <span className="text-sm text-center">{desc}</span>
// </Link>
// }

export default function AOLanding() {
const [walletAddress, setWalletAddress] = useState<string>("");
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)
Expand All @@ -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);
}

Expand All @@ -79,36 +104,75 @@ export default function AOLanding() {
}, [autoconnect]);

return <>
<section className="container text-foreground/90 p-24 my-16">
<div className="flex flex-col gap-5 items-center">
<div className="flex flex-col gap-1 items-end absolute top-0 p-2 w-full bg-background/30 backdrop-blur text-sm text-right">
<div className="flex gap-2 items-center text-red-400">Update: If you had notebook files which have become normal files now, please change their filename to .luanb extension <AlertTriangleIcon/></div>
<div className="flex gap-2 items-center text-red-400">Old processes must perform a security update (settings -&gt; patch 6-5-24) <AlertTriangleIcon/></div>
{/* <div className="flex gap-2 items-center">All new processes will be spawned with WASM64 support! 🤩</div> */}
</div>
<h1 className="text-6xl font-bold" suppressHydrationWarning>gm {
words[Math.floor(Math.random() * words.length)]
}</h1>
<section className="container text-foreground/90 p-5 overflow-scroll grid grid-cols-1 min-w-[85vw] md:grid-cols-2 md:gap-5">
<div className="absolute bottom-2 mx-auto w-fit ring-1 ring-destructive-foreground bg-destructive text-destructive-foreground p-1 px-3 rounded-md left-0 right-0 flex gap-2 items-center cursor-pointer" onMouseOver={()=>setShowUpdates(true)} onMouseLeave={()=>setShowUpdates(false)}><InfoIcon size={17} />UPDATES</div>
{showUpdates && <div className="absolute left-0 top-0 right-0 m-1 backdrop-blur bg-background/50 flex flex-col gap-5 font-bold text-lg items-center justify-center pointer-events-none bottom-11">
<div className="flex gap-2 items-center text-destructive-foreground"><div>
<AlertTriangleIcon />
</div> If you had notebook files which have become normal files now, please change their filename to .luanb extension</div>
<div className="flex gap-2 items-center text-destructive-foreground"><div>
<AlertTriangleIcon />
</div> Old processes must perform a security update (settings &gt; patch 6-5-24): only for processes spawned prior to AOS 1.11.0</div>
<div className="flex gap-2 items-center"><div><PartyPopper/></div> All new processes will be spawned with WASM64 support!</div>

</div>}
<div className="flex flex-col gap-5 items-start mt-10 md:mt-0">
<h1 className="text-6xl font-bold" suppressHydrationWarning>BetterIDEa</h1>

<p className="text-lg">
Welcome to the intuitive web IDE for building powerful <span className="text-primary font-medium">actor oriented</span> applications.
<span className="text-primary font-medium">ao&apos;s</span> development environment. {
words[Math.floor(Math.random() * words.length)]
}
</p>

{!walletAddress && <Button onClick={connectWallet}>Connect Wallet</Button>}

<div className="flex flex-col text-center gap-x-4 my-6">
<h1 className="px-8">Create a new project from the sidebar</h1>
<h1 className="px-8">
Or open an existing one ;)
</h1>
<div className="flex flex-col text-left my-6 gap-1">
<Button variant="link" className="justify-start h-7 text-foreground/90 gap-1 px-0" onClick={() => document.getElementById("new-proj-dialog").click()}>
<PlusSquare size={20} /> New Project
</Button>
{/* <Button variant="link" className="justify-start h-7 ring-1 text-foreground/90 gap-1 px-0">
<FolderOpen size={20} /> Open Existing
</Button> */}
</div>
<div>Latest content</div>
{/* <div>Latest content</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
<ContentItem title="Installing Packages" desc="Learn how to use APM and install packages on processes" link="https://mirror.xyz/0xCf673b87aFBed6091617331cC895376209d3b923/M4XoQFFCAKBH54bwIsCFT3Frxd575-plCg2o4H1Tujs" />
<ContentItem title="Portable Codecells" desc="Learn how to integrate our codecells into your webapps" link="https://youtu.be/e7Gx2NdWXLQ?si=hg8Ih7828AsVjpp7" />
<ContentItem title="Unit Testing" desc="Try writing unit tests for your AO functions" link="https://mirror.xyz/0xCf673b87aFBed6091617331cC895376209d3b923/uBgGB-HNhlig7RucAzdSyRjJIJSXCug5NMgN7bXS9qk" />
<ContentItem 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"/>
</div>
</div> */}
</div>
<div className="p-5 flex flex-col gap-4 md:gap-10 overflow-scroll mb-10 md:mb-0">
<details open>
<summary className="font-medium mb-2">Recent Projects</summary>
<div className="pl-5">
{
recents.toReversed().map((pname, i) => <Button key={i} variant="link" className="flex h-7 gap-2 px-1 justify-start text-foreground/90 tracking-wide"
onClick={() => document.getElementById(pname)?.click()}
>
<FileCodeIcon size={18} />
<span className="">{pname}</span>
</Button>)
}
{recents.length === 0 && <div className="text-sm text-foreground/60">No recent projects</div>}
</div>
</details>
<details open>
<summary className="font-medium mb-2">Freshly Published</summary>
<div className="pl-5 flex flex-col gap-3 overflow-scroll">
{
published.map((post, i) =>
<Link href={post.link} target="_blank" key={i}><Button variant="link" className="flex gap-2 px-1 justify-start text-foreground/90 tracking-wide">
<div><NewspaperIcon size={18} /></div>
<div className="flex flex-col items-start">
<span className="font-medium">{post.title}</span>
<span className="font-light text-sm">{post.desc}</span>
</div>
</Button></Link>)
}
</div>
</details>
</div>
</section>
</>
Expand Down
17 changes: 16 additions & 1 deletion next_app/src/components/ao/new-ao-project-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -333,7 +348,7 @@ export function NewAOProjectDialog({ manager, collapsed, setCollapsed }: { manag

setPopupOpen(e)
}}>
<DialogTrigger data-collapsed={collapsed} className="flex m-2 mx-auto w-[90%] hover:bg-accent gap-2 items-center data-[collapsed=false]:justify-start data-[collapsed=true]:justify-center p-2"
<DialogTrigger data-collapsed={collapsed} id="new-proj-dialog" className="flex m-2 mx-auto w-[90%] hover:bg-accent gap-2 items-center data-[collapsed=false]:justify-start data-[collapsed=true]:justify-center p-2"
onClick={async (e) => {
e.preventDefault()
try {
Expand Down
2 changes: 1 addition & 1 deletion next_app/src/components/ao/packages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ export default function Packages() {
<DialogHeader>
<DialogTitle>Explore packages</DialogTitle>
<DialogDescription>
Packages allow you to add extra functionality to your ao processes. To publish your own package visit <Link href="https://apm.betteridea.dev" target="_blank">apm.betteridea.dev</Link>
Packages allow you to add extra functionality to your ao processes. To publish your own package visit <Link href="https://apm.betteridea.dev" target="_blank" className="underline underline-offset-4">apm.betteridea.dev</Link>
</DialogDescription>
</DialogHeader>
<div className="flex gap-2">
Expand Down
43 changes: 26 additions & 17 deletions next_app/src/components/side-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,35 +68,44 @@ export default function SideBar({ collapsed, setCollapsed, manager }: { collapse
let ownerAddress = manager.projects[pname].ownerWallet;
return (
<div key={_}>
<div data-active={active} data-collapsed={collapsed} className=" cursor-default h-fit rounded-none flex relative gap-2 px-3 mb-2 data-[active=true]:mb-0 items-start data-[collapsed=false]:justify-start data-[collapsed=true]:justify-center" key={_}>
<div id={pname} data-active={active} data-collapsed={collapsed} className=" cursor-default h-fit rounded-none flex relative gap-2 px-3 mb-2 data-[active=true]:mb-0 items-start data-[collapsed=false]:justify-start data-[collapsed=true]:justify-center" key={_}
onClick={() => {
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));
}
}}>
<Icons.folder
data-collapsed={collapsed}
data-not-owned={!ownedByActiveWallet}
className="fill-foreground stroke-none cursor-pointer data-[active=true]:fill-primary"
data-active={active}
onClick={() => {
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 && (
<div className="flex flex-col w-full">
<div
data-active={active}
className="flex gap-1 cursor-pointer items-center data-[active=true]:text-primary"
onClick={() => {
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()}
>
<Icons.play data-active={active} className="fill-foreground data-[active=true]:fill-primary stroke-none mr-1 data-[active=true]:rotate-90" height={12} width={12} />

Expand Down
8 changes: 4 additions & 4 deletions next_app/src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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%;
Expand Down

0 comments on commit f6118c3

Please sign in to comment.