From eddb870f85c67dbe0a343e34d52c563ae4b2fcf5 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Mon, 13 Dec 2021 17:22:51 +0200
Subject: [PATCH] Update deploy and develope pages

---
 pages/deploy/[[...slug]].tsx  | 33 ++++++++++++++++++++--
 pages/develop/[[...slug]].tsx | 53 +++++++++++++++++++++++++++++++++--
 2 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/pages/deploy/[[...slug]].tsx b/pages/deploy/[[...slug]].tsx
index 3071c93..c26cb40 100644
--- a/pages/deploy/[[...slug]].tsx
+++ b/pages/deploy/[[...slug]].tsx
@@ -1,8 +1,37 @@
-import Container from "../../components/Container";
+import React from "react";
+import dynamic from "next/dynamic";
+import Flex from "../../components/Flex";
+import { useSnapshot } from "valtio";
+import { state } from "../../state";
+
+const DeployEditor = dynamic(() => import("../../components/DeployEditor"), {
+  ssr: false,
+});
+
+const Accounts = dynamic(() => import("../../components/Accounts"), {
+  ssr: false,
+});
+
+const LogBox = dynamic(() => import("../../components/LogBox"), {
+  ssr: false,
+});
 
 const Deploy = () => {
+  const snap = useSnapshot(state);
   return (
-    <Container css={{ py: "$10" }}>This will be the deploy page</Container>
+    <>
+      <main style={{ display: "flex", flex: 1 }}>
+        <DeployEditor />
+      </main>
+      <Flex css={{ flexDirection: "row", width: "100%" }}>
+        <Accounts />
+        <LogBox
+          title="Deploy Log"
+          logs={snap.deployLogs}
+          clearLog={() => (state.deployLogs = [])}
+        />
+      </Flex>
+    </>
   );
 };
 
diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx
index 623b41e..bd3d1a1 100644
--- a/pages/develop/[[...slug]].tsx
+++ b/pages/develop/[[...slug]].tsx
@@ -1,22 +1,69 @@
 import dynamic from "next/dynamic";
+import { useSnapshot } from "valtio";
+import Hotkeys from "react-hot-keys";
+import { Play } from "phosphor-react";
 
 import type { NextPage } from "next";
+import { compileCode, state } from "../../state";
+import Button from "../../components/Button";
+import Box from "../../components/Box";
 
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
 });
 
-const Footer = dynamic(() => import("../../components/Footer"), {
+const LogBox = dynamic(() => import("../../components/LogBox"), {
   ssr: false,
 });
 
 const Home: NextPage = () => {
+  const snap = useSnapshot(state);
   return (
     <>
-      <main style={{ display: "flex", flex: 1 }}>
+      <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />
+        {snap.files[snap.active]?.name?.split(".")?.[1].toLowerCase() ===
+          "c" && (
+          <Hotkeys
+            keyName="command+b,ctrl+b"
+            onKeyDown={() =>
+              !snap.compiling && snap.files.length && compileCode(snap.active)
+            }
+          >
+            <Button
+              variant="primary"
+              uppercase
+              disabled={!snap.files.length}
+              isLoading={snap.compiling}
+              onClick={() => compileCode(snap.active)}
+              css={{
+                position: "absolute",
+                bottom: "$4",
+                left: "$4",
+                alignItems: "center",
+                display: "flex",
+                cursor: "pointer",
+              }}
+            >
+              <Play weight="bold" size="16px" />
+              Compile to Wasm
+            </Button>
+          </Hotkeys>
+        )}
       </main>
-      <Footer />
+      <Box
+        css={{
+          display: "flex",
+          background: "$mauve1",
+          position: "relative",
+        }}
+      >
+        <LogBox
+          title="Development Log"
+          clearLog={() => (state.logs = [])}
+          logs={snap.logs}
+        />
+      </Box>
     </>
   );
 };