reshaped project with tailwindcss

package.json

@@ -14,23 +14,30 @@
     "check:types": "npx tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.1",
+    "@reduxjs/toolkit": "^1.9.7",
+    "arweave": "^1.14.4",
     "electron-serve": "^1.1.0",
-    "electron-store": "^8.1.0"
+    "electron-store": "^8.1.0",
+    "next-redux-wrapper": "^8.1.0",
+    "parse-prometheus-text-format": "^1.1.1",
+    "react-redux": "^8.1.3",
+    "react-ui-scrollspy": "^2.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.31",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
-    "electron": "^27.0.2",
+    "autoprefixer": "^10.4.16",
+    "electron": "^26.2.2",
     "electron-builder": "^24.6.4",
     "eslint": "^8.52.0",
     "eslint-plugin-react": "^7.33.2",
-    "next": "^13.5.6",
+    "next": "^12.3.4",
     "nextron": "^8.12.0",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2"
   }
 }

renderer/components/Asset.tsx

@@ -0,0 +1,7 @@
+const WalletSvg = "../wallet.svg";
+const ArweaveLogo = "../arweave_logo.svg";
+
+export const ASSET = {
+    WalletSvg,
+    ArweaveLogo
+}

renderer/components/MiningCalculatorReadOnly.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react";
-import { Table, Tbody, Tr, Th, Td } from "@chakra-ui/react";
 
 interface MiningCalculatorReadOnlyProps {
   hashrate: number;
@@ -8,45 +7,32 @@ interface MiningCalculatorReadOnlyProps {
   net_hashrate: number;
 }
 
-export const MiningCalculatorReadOnly: FC<MiningCalculatorReadOnlyProps> = ({
-  hashrate,
-  exchange_rate,
-  net_day_earnings_ar,
-  net_hashrate,
-}) => {
-  const profitDetails = [
-    { title: "month", mult: 30 },
-    { title: "week", mult: 7 },
-    { title: "day", mult: 1 },
-    { title: "hour", mult: 1 / 24 },
-  ].map(({ title, mult }) => {
-    const profitArPerDay = (net_day_earnings_ar * hashrate) / net_hashrate;
-    const profit = profitArPerDay * mult;
+export const MiningCalculatorReadOnly: FC<MiningCalculatorReadOnlyProps> = () => {
+  // const profitDetails = [
+  //   { title: "month", mult: 30 },
+  //   { title: "week", mult: 7 },
+  //   { title: "day", mult: 1 },
+  //   { title: "hour", mult: 1 / 24 },
+  // ].map(({ title, mult }) => {
+  //   const profitArPerDay = (net_day_earnings_ar * hashrate) / net_hashrate;
+  //   const profit = profitArPerDay * mult;
 
-    return (
-      <Tr key={title}>
-        <Th>Profit per {title}</Th>
-        <Td style={{ textAlign: "right" }}>{profit.toFixed(2)}</Td>
-        <Td>AR/{title}</Td>
-        <Td style={{ textAlign: "right" }}>{(profit * exchange_rate).toFixed(2)}</Td>
-        <Td>USD/{title}</Td>
-      </Tr>
-    );
-  });
+  //   // return (
+  //   //   <Tr key={title}>
+  //   //     <Th>Profit per {title}</Th>
+  //   //     <Td style={{ textAlign: "right" }}>{profit.toFixed(2)}</Td>
+  //   //     <Td>AR/{title}</Td>
+  //   //     <Td style={{ textAlign: "right" }}>{(profit * exchange_rate).toFixed(2)}</Td>
+  //   //     <Td>USD/{title}</Td>
+  //   //   </Tr>
+  //   // );
+
+  //   return;
+  // });
 
   return (
-    <Table>
-      <Tbody>
-        <Tr>
-          <Th>net hashrate</Th>
-          <Td colSpan={4}>{net_hashrate}</Td>
-        </Tr>
-        <Tr>
-          <Th>Exchange rate</Th>
-          <Td colSpan={4}>{exchange_rate} USD/AR</Td>
-        </Tr>
-        {profitDetails}
-      </Tbody>
-    </Table>
+    <>
+      Mining Calculator
+    </>
   );
 };

renderer/components/Navbar.tsx

@@ -1,73 +1,91 @@
-import { MouseEvent } from "react";
-import { Button, Flex, Heading, HStack, Image } from "@chakra-ui/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import WalletButton from './WalletButton';
+import { ASSET } from './Asset';
 
-export const Navbar = () => {
-  const router = useRouter();
-  console.log({ router });
-  return (
-    <Flex
-      justifyContent="space-between"
-      alignItems="center"
-      h="5rem"
-      w="100%"
-      p="0 2.5rem"
-      borderBottom="1px solid black"
-    >
-      <Image src="/arweave_logo.svg" />
-      <HStack
-        gap={8}
-        sx={{
-          "a:hover > *": {
-            fontWeight: "500 !important",
-          },
-        }}
-      >
-        <Link href="/home">
-          <Heading
-            fontSize="1.2rem"
-            fontWeight={router.route.startsWith("/home") ? "500" : "300"}
-            fontFamily="mono"
-          >
-            {"Home"}
-          </Heading>
-        </Link>
-        <Link href="/dashboard">
-          <Heading
-            fontSize="1.2rem"
-            fontWeight={router.route.startsWith("/dashboard") ? "500" : "300"}
-            fontFamily="mono"
-          >
-            {"Dashboard"}
-          </Heading>
-        </Link>
-        <Link href="/learn">
-          <Heading
-            fontSize="1.2rem"
-            fontWeight={router.route.startsWith("/learn") ? "500" : "300"}
-            fontFamily="mono"
-          >
-            {"Learn"}
-          </Heading>
-        </Link>
-        <Link
-          href="https://discord.gg/mRbVUwJxAH"
-          onClick={(event: MouseEvent) => {
-            if (window.ipc) {
-              event.preventDefault();
-              window.ipc.send("open-url", "https://discord.gg/mRbVUwJxAH");
-            }
-          }}
-        >
-          <Heading fontSize="1.2rem" fontWeight="300" fontFamily="mono">
-            {"Discord"}
-          </Heading>
-        </Link>
-      </HStack>
-      <Button bgColor="buttonColor" color="buttonTextColor">
-        Connect
-      </Button>
-    </Flex>
-  );
-};
+interface NavLink {
+    href: string;
+    label: string;
+    target?: string;
+}
+
+export default function Navbar() {
+    const router = useRouter();
+
+    const links: NavLink[] = [
+        {
+            href: '/home',
+            label: 'Home',
+        },
+        {
+            href: '/dashboard',
+            label: 'Dashboard',
+        },
+        {
+            href: '/learn',
+            label: 'Learn',
+        },
+        {
+            href: '/docs',
+            label: 'Docs',
+        },
+        {
+            href: '/discord',
+            label: 'Discord',
+            target: "https://discord.gg/mRbVUwJxAH"
+        },
+    ]
+
+    const NavLink = ({ href, label, target }: NavLink) => {
+        return (
+            <Link href={href} passHref>
+                <a
+                    onClick={(event) => {
+                        if (window.ipc && target) {
+                            event.preventDefault();
+                            window.ipc.send("open-url", target);
+                        }
+                    }}
+                    className={`block px-5 py-2 rounded hover:bg-gray-200 ${router.pathname == href ? "font-medium bg-gray-200" : "font-light"}`}>{label}</a>
+            </Link >
+        )
+    }
+
+    return (
+        <header className='w-full'>
+            <nav className="fixed w-full z-20 top-0 left-0 border-b border-gray-300 bg-[#F1F1F1]">
+                <div className="flex flex-wrap items-center justify-between p-4 px-10">
+                    <Link href="/home" passHref>
+                        <a className="flex items-center">
+                            <img src={ASSET.ArweaveLogo} alt="arweave-logo" className="w-8 h-8 mr-2" />
+                        </a>
+                    </Link>
+
+                    <div className="flex md:order-2 gap-2">
+                        <WalletButton />
+
+                        <button type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden text-gray-950 border border-gray-950 hover:bg-gray-950 hover:text-white">
+                            <span className="sr-only">Open main menu</span>
+                            <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+                                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
+                            </svg>
+                        </button>
+                    </div>
+
+
+                    <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1">
+                        <ul className="flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-2 md:mt-0">
+                            {
+                                links.map((link, index) => {
+                                    return (
+                                        <NavLink key={index} href={link.href} label={link.label} target={link.target} />
+                                    )
+                                })
+                            }
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        </header>
+    );
+}

renderer/components/WalletButton.tsx

@@ -0,0 +1,10 @@
+import { ASSET } from "./Asset";
+
+export default function WalletButton() {
+    return (
+        <button className="flex items-center gap-2 border border-gray-950 rounded-md px-4 py-2 font-normal outline-none text-gray-950 hover:bg-gray-200" type="button">
+            <img src={ASSET.WalletSvg} />
+            <span>Connect Wallet</span>
+        </button>
+    )
+}

renderer/layouts/MainLayout.tsx

@@ -0,0 +1,14 @@
+import Navbar from "../components/Navbar"
+
+interface Props {
+    children: React.ReactNode | React.ReactNodeArray
+}
+
+export default function MainLayout({ children }: Props) {
+    return (
+        <section className="min-h-screen w-full bg-[#F1F1F1]">
+            <Navbar />
+            {children}
+        </section>
+    )
+}

renderer/layouts/index.tsx

@@ -0,0 +1 @@
+export { default as MainLayout } from "./MainLayout";

renderer/lib/arweave.tsx

@@ -0,0 +1,4 @@
+
+import Arweave from "arweave";
+
+export const Arweave_API = Arweave.init({});