feat: added new UI components and reorganized routing logic (hashgrap…

…h#300) (hashgraph#301)

* dapp-update: reworked protected routes logic

protected routes are now nested under /hedera route

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-update: reworked layout logic

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-style: added z-index to gradient component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-feat: added smart contact routes

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-feat: added LEFT_SIDE_BAR_ITEMS object

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-feat: added new LeftSideBar component

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

* dapp-feat: new OverviewSection UI

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>

---------

Signed-off-by: Logan Nguyen <logan.nguyen@swirldslabs.com>
Signed-off-by: Mo Shaikjee <shaikjeemohammed@gmail.com>

system-contract-dapp-playground/src/app/hedera/erc-20/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const ERC20 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">ERC20</div>
+  );
+};
+
+export default ERC20;

system-contract-dapp-playground/src/app/hedera/erc-721/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const ERC721 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">ERC721</div>
+  );
+};
+
+export default ERC721;

system-contract-dapp-playground/src/app/hedera/exchange-rate-hip-475/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HIP475 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HIP475</div>
+  );
+};
+
+export default HIP475;

system-contract-dapp-playground/src/app/hedera/hrc-719/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HRC719 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HRC719</div>
+  );
+};
+
+export default HRC719;

system-contract-dapp-playground/src/app/hedera/hts-hip-206/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HTS206 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HTS206</div>
+  );
+};
+
+export default HTS206;

system-contract-dapp-playground/src/app/hedera/layout.tsx

@@ -0,0 +1,46 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Navbar from '@/components/navbar';
+import Footer from '@/components/footer';
+import LeftSideBar from '@/components/leftSideBar';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="flex flex-col min-h-screen">
+      <Navbar />
+      <div className="flex flex-1 px-6 overflow-x-hidden">
+        {/* <LeftSidebar /> */}
+        <div>
+          <LeftSideBar />
+        </div>
+        {/* <Main children /> */}
+        <div className="flex-1">{children}</div>
+
+        {/* <RightSidebar /> */}
+        <div>
+          <div className="w-72" />
+        </div>
+      </div>
+
+      <Footer />
+    </main>
+  );
+}

system-contract-dapp-playground/src/app/(protected)/overview/page.tsx → system-contract-dapp-playground/src/app/hedera/overview/page.tsx

@@ -18,12 +18,10 @@
  *
  */
 
+import OverviewSection from '@/sections/overview';
+
 const Overview = () => {
-  return (
-    <div className="text-white h-full w-full flex justify-center items-center text-[3rem]">
-      Overview
-    </div>
-  );
+  return <OverviewSection />;
 };
 
 export default Overview;

system-contract-dapp-playground/src/app/hedera/prng-hip-351/page.tsx

@@ -0,0 +1,27 @@
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+const HIP351 = () => {
+  return (
+    <div className="text-white w-full flex justify-center items-center text-[3rem]">HIP351</div>
+  );
+};
+
+export default HIP351;

system-contract-dapp-playground/src/app/layout.tsx

@@ -20,8 +20,6 @@
 
 import '@/styles/globals.css';
 import StyreneAWebFont from '@/fonts';
-import Navbar from '@/components/navbar';
-import Footer from '@/components/footer';
 import dappMetadata from '@/utils/metadata';
 import ChakraUIProviders from '@/libs/chakra/provider';
 import BgGradient from '@/components/background-gradients';
@@ -30,18 +28,12 @@ import BgGradient from '@/components/background-gradients';
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${StyreneAWebFont.variable}`}>
-      <body>
+      <body className="bg-primary font-styrene">
         <ChakraUIProviders>
-          <main className="bg-primary overflow-hidden font-styrene">
-            <div className="relative h-screen 2xl:max-w-[100rem] 2xl:mx-auto">
-              <main className="bg-primary overflow-hidden relative h-screen flex flex-col">
-                <Navbar />
-                {children}
-                <Footer />
-              </main>
-              <BgGradient />
-            </div>
-          </main>
+          <div className="relative 2xl:max-w-[100rem] 2xl:mx-auto">
+            {children}
+            <BgGradient />
+          </div>
         </ChakraUIProviders>
       </body>
     </html>

system-contract-dapp-playground/src/app/page.tsx

@@ -17,8 +17,16 @@
  * limitations under the License.
  *
  */
+import Footer from '@/components/footer';
+import Navbar from '@/components/navbar';
 import LandingPage from '@/sections/landing';
 
 export default function Home() {
-  return <LandingPage />;
+  return (
+    <main className="h-screen flex flex-col">
+      <Navbar />
+      <LandingPage />;
+      <Footer />
+    </main>
+  );
 }

system-contract-dapp-playground/src/components/background-gradients/index.tsx

@@ -21,10 +21,10 @@
 const BgGradient = () => {
   return (
     <div className="bg-white 2xl:max-w-[100rem] 2xl:mx-auto">
-      <div className="gradient-01 absolute -top-40 -left-16" />
-      <div className="gradient-02 absolute -top-40 -left-32" />
-      <div className="gradient-03 absolute -top-[23rem] right-64" />
-      <div className="gradient-04 absolute -bottom-[40rem] left-0 right-0 m-auto" />
+      <div className="gradient-01 absolute -top-40 -left-16 -z-10" />
+      <div className="gradient-02 absolute -top-40 -left-32 -z-10" />
+      <div className="gradient-03 absolute -top-[23rem] right-64 -z-10" />
+      <div className="gradient-04 -z-10" />
     </div>
   );
 };

system-contract-dapp-playground/src/components/footer/index.tsx

@@ -31,14 +31,16 @@ const Footer = () => {
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1 }}
       transition={{
-        delay: 0.6,
-        duration: 0.6,
+        delay: 0.3,
+        duration: 0.3,
       }}
-      className="text-white px-6 w-full z-40 sm:px-16 md:px-24"
+      viewport={{ once: true }}
+      className="text-white px-6 w-full z-40 flex flex-col items-center"
     >
+      <hr className="w-[100vw] border-t border-white/40" />
       <div
-        className="w-full flex flex-col gap-6 border-t-[1px] border-white/30 py-3
-                  md:flex-row md:justify-between md:items-center md:pt-9 md:pb-6"
+        className="w-full flex flex-col gap-6 py-3
+                  md:flex-row md:justify-between md:items-center md:py-6 md:pb-3"
       >
         {/* Logo & copyright*/}
         <div className="flex flex-col gap-1 justify-center items-center md:items-start">

system-contract-dapp-playground/src/components/leftSideBar/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+/*-
+ *
+ * Hedera Smart Contracts
+ *
+ * Copyright (C) 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+import { LEFT_SIDE_BAR_ITEMS } from '@/utils/constants';
+
+const LeftSideBar = () => {
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{
+        delay: 0.3,
+        duration: 0.3,
+      }}
+      viewport={{ once: true }}
+      className="w-72 h-full border-r border-white/30 text-white flex flex-col gap-3 pt-7 text-lg font-light tracking-tight leading-6 pr-2"
+    >
+      {LEFT_SIDE_BAR_ITEMS.map((item) => (
+        <Link
+          key={item.name}
+          href={item.path}
+          className={`${
+            pathname.includes(item.path) && `bg-black/30 font-normal text-hedera-purple`
+          } py-3 px-3 rounded-lg hover:bg-black/30 transition duration-300`}
+        >
+          {item.name}
+        </Link>
+      ))}
+    </motion.div>
+  );
+};
+
+export default LeftSideBar;