Merge pull request #2 from ZeroBoundLabs/feat-add-ui-to-mono

Basic staking
ZeroBoundLabs · May 6, 2024 · 46b5baa · 46b5baa
2 parents a5c656a + 5155f9d
commit 46b5baa
Show file tree

Hide file tree

Showing 40 changed files with 3,721 additions and 111 deletions.
diff --git a/packages/nextjs/app/globals.css b/packages/nextjs/app/globals.css
@@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+h1 {
+  @apply mb-8 text-4xl font-bold;
+  /* Adjust text size and font weight as needed */
+}
+h2 {
+  @apply  mb-6 text-3xl md:text-4xl font-semibold;
+}
+
+h3 {
+  @apply  mb-4 text-2xl md:text-3xl font-semibold;
+}
+
+h4 {
+  @apply  mb-3 text-xl md:text-2xl font-medium;
+}
+h5 {
+  @apply  mb-2 text-xl md:text-xl font-medium;
+}
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+p {
+  @apply text-base leading-relaxed mb-4;
+}
+/* a {
+  @apply text-custom-link;
+}
+.hyper {
+  @apply text-custom-link;
+} */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,61 +1,28 @@
-import "@rainbow-me/rainbowkit/styles.css";
-import { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
-import { ThemeProvider } from "~~/components/ThemeProvider";
-import "~~/styles/globals.css";
 
-const baseUrl = process.env.VERCEL_URL
-  ? `https://${process.env.VERCEL_URL}`
-  : `http://localhost:${process.env.PORT || 3000}`;
-const imageUrl = `${baseUrl}/thumbnail.jpg`;
+//const inter = Inter({ subsets: ["latin"] });
 
-const title = "Scaffold-ETH 2 App";
-const titleTemplate = "%s | Scaffold-ETH 2";
-const description = "Built with 🏗 Scaffold-ETH 2";
-
-export const metadata: Metadata = {
-  metadataBase: new URL(baseUrl),
-  title: {
-    default: title,
-    template: titleTemplate,
-  },
-  description,
-  openGraph: {
-    title: {
-      default: title,
-      template: titleTemplate,
-    },
-    description,
-    images: [
-      {
-        url: imageUrl,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [imageUrl],
-    title: {
-      default: title,
-      template: titleTemplate,
-    },
-    description,
-  },
-  icons: {
-    icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
-  },
-};
-
-const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
-    <html suppressHydrationWarning>
+    <html lang="en">
+      <head>
+        {/* <ColorSchemeScript /> */}
+        <link rel="shortcut icon" href="/favicon.png" />
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" />
+      </head>
       <body>
-        <ThemeProvider enableSystem>
+        <MantineProvider defaultColorScheme="dark">
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
-        </ThemeProvider>
+        </MantineProvider>
       </body>
     </html>
   );
-};
-
-export default ScaffoldEthApp;
+}
diff --git a/packages/nextjs/app/layout_old.tsx b/packages/nextjs/app/layout_old.tsx
@@ -0,0 +1,61 @@
+import "@rainbow-me/rainbowkit/styles.css";
+import { Metadata } from "next";
+import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
+import { ThemeProvider } from "~~/components/ThemeProvider";
+import "~~/styles/globals.css";
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : `http://localhost:${process.env.PORT || 3000}`;
+const imageUrl = `${baseUrl}/thumbnail.jpg`;
+
+const title = "Scaffold-ETH 2 App";
+const titleTemplate = "%s | Scaffold-ETH 2";
+const description = "Built with 🏗 Scaffold-ETH 2";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: title,
+    template: titleTemplate,
+  },
+  description,
+  openGraph: {
+    title: {
+      default: title,
+      template: titleTemplate,
+    },
+    description,
+    images: [
+      {
+        url: imageUrl,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [imageUrl],
+    title: {
+      default: title,
+      template: titleTemplate,
+    },
+    description,
+  },
+  icons: {
+    icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
+  },
+};
+
+const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <ThemeProvider enableSystem>
+          <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+};
+
+export default ScaffoldEthApp;
diff --git a/packages/nextjs/app/rainbow.tsx b/packages/nextjs/app/rainbow.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import "@rainbow-me/rainbowkit/styles.css";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import {
+  // arbitrum,
+  // base,
+  // mainnet,
+  // optimism,
+  // polygon,
+  sepolia,
+  // zora,
+} from "wagmi/chains";
+import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+
+const config = getDefaultConfig({
+  appName: "RainbowKit App",
+  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_ID as string,
+  chains: [
+    // mainnet,
+    sepolia,
+    ...(process.env.NEXT_PUBLIC_WALLETCONNECT_ID === "true" ? [sepolia] : []),
+  ],
+  ssr: true,
+});
+
+const client = new QueryClient();
+
+function MyApp({ children }: any) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={client}>
+        <RainbowKitProvider>{children}</RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export default MyApp;
diff --git a/packages/nextjs/app/renamed_template.tsx b/packages/nextjs/app/renamed_template.tsx
@@ -0,0 +1,13 @@
+import Navbar from "../components/navbar";
+import Rainbow from "./rainbow";
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <Rainbow>
+        <Navbar />
+        {children}
+      </Rainbow>
+    </div>
+  );
+}
diff --git a/packages/nextjs/app/staking/page.tsx b/packages/nextjs/app/staking/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+//import projectMetadata from "../../metaData";
+//import projects from "../../projectData";
+//import { Metadata } from "next";
+
+// export const metadata: Metadata = {
+//   title: "Hyperstaker",
+//   description: "Your Insight, Everyone's Reward.",
+// };
+
+export default function Page() {
+  const { data: stakedAmount } = useScaffoldReadContract({
+    contractName: "HyperStaking",
+    functionName: "stakedAmount",
+    args: ["0x63A32F1595a68E811496D820680B74A5ccA303c5", 0x100000000000000000000000000000001n],
+  });
+  const { data: units } = useScaffoldReadContract({
+    contractName: "HypercertMinter",
+    functionName: "unitsOf",
+    args: ["0x610178dA211FEF7D417bC0e6FeD39F05609AD788", 0x100000000000000000000000000000001n],
+  });
+  console.log("stake: stakedAmount", stakedAmount);
+  const displayStakedAmount = (amount: bigint | undefined) => {
+    return amount ? amount.toString() : "Loading...";
+  };
+  // console.log("stake: units", units?.toString());
+  return (
+    <div className="container mx-auto">
+      <div className="flex flex-row">
+        <h1>Staking</h1>
+        <p>Staked Amount: {displayStakedAmount(stakedAmount)}</p>
+        <p>Units of Amount: {units?.toString()}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/nextjs/components/DarkSwitch.js b/packages/nextjs/components/DarkSwitch.js
@@ -0,0 +1,58 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+
+const ThemeChanger = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // When mounted on client, now we can show the UI
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="flex items-center">
+      {theme === "dark" ? (
+        <button
+          onClick={() => setTheme("light")}
+          className="text-gray-300 rounded-full outline-none focus:outline-none"
+        >
+          <span className="sr-only">Light Mode</span>
+
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-5 h-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+          </svg>
+        </button>
+      ) : (
+        <button
+          onClick={() => setTheme("dark")}
+          className="text-gray-500 rounded-full outline-none focus:outline-none focus-visible:ring focus-visible:ring-gray-100 focus:ring-opacity-20"
+        >
+          <span className="sr-only">Dark Mode</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="12" r="5" />
+            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ThemeChanger;
diff --git a/packages/nextjs/components/ImpactCategories.tsx b/packages/nextjs/components/ImpactCategories.tsx
@@ -0,0 +1,14 @@
+import { Tag } from "./ui/Tag";
+import { impactCategories } from "../config";
+
+export const ImpactCategories = ({ tags }: { tags?: string[] }) => (
+  <div className="no-scrollbar">
+    <div className="flex gap-1 overflow-x-auto">
+      {tags?.map((key) => (
+        <Tag key={key} size="sm">
+          {impactCategories[key as keyof typeof impactCategories]?.label ?? key}
+        </Tag>
+      ))}
+    </div>
+  </div>
+);
diff --git a/packages/nextjs/components/ProjectAvatar.tsx b/packages/nextjs/components/ProjectAvatar.tsx
@@ -0,0 +1,16 @@
+import { type ComponentProps } from "react";
+import { type Address } from "viem";
+
+import { Avatar } from "./ui/Avatar";
+
+// TODO: ProfileMetadata
+export function ProjectAvatar(
+  props: { address: Address | string; url: string } & ComponentProps<
+    typeof Avatar
+  >
+) {
+  // const profile = useProfileWithMetadata(props.profileId);
+  // const { profileImageUrl } = profile.data ?? {};
+
+  return <Avatar {...props} src={props.url} />;
+}