Merge pull request #68 from penumbra-zone/ui-refactor

Refactored landing page and all tables to match the new, more responsive-friendly, redesign. Officially switched to Iosevka as primary client font.

IOSEVKA-LICENSE.md

@@ -0,0 +1,110 @@
+Copyright (c) 2015-2024, Renzhi Li (aka. Belleve Invis, belleve@typeof.net)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+--------------------------
+
+
+SIL Open Font License v1.1
+====================================================
+
+
+Preamble
+----------
+
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+
+Definitions
+-------------
+
+`"Font Software"` refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+`"Reserved Font Name"` refers to any names specified as such after the
+copyright statement(s).
+
+`"Original Version"` refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+`"Modified Version"` refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+`"Author"` refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+
+Permission & Conditions
+------------------------
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1. Neither the Font Software nor any of its individual components,
+   in Original or Modified Versions, may be sold by itself.
+
+2. Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3. No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the corresponding
+   Copyright Holder. This restriction only applies to the primary font name as
+   presented to the users.
+
+4. The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5. The Font Software, modified or unmodified, in part or in whole,
+   must be distributed entirely under this license, and must not be
+   distributed under any other license. The requirement for fonts to
+   remain under this license does not apply to any document created
+   using the Font Software.
+
+
+
+Termination
+-----------
+
+This license becomes null and void if any of the above conditions are
+not met.
+
+
+    DISCLAIMER
+
+    THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+    OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+    COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+    INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+    DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+    OTHER DEALINGS IN THE FONT SOFTWARE.

src/app/api/block/route.ts

@@ -91,7 +91,9 @@ export async function GET(req: Request) {
 
       // eslint-disable-next-line @typescript-eslint/naming-convention
       tx_hash = tx.tx_hash;
-      return new Response(JSON.stringify([{tx_hash, ...block}, penumbraTx.toJsonString()]));
+      // BUG: Liable to throw the same `Error: ... cannot encode field penumbra.core.component.ibc.v1.IbcRelay.raw_action to JSON: cannot encode message google.protobuf.Any to JSON: "/ibc.core.client.v1.MsgCreateClient" is not in the type registry`
+      //      error for transactions associated with an e.g. `update_client` event.
+      return new Response(JSON.stringify([{tx_hash, ...block}, penumbraTx.toJson()]));
     }
 
     console.log("No Transaction associated with block.");

src/app/blocks/page.tsx

@@ -5,9 +5,9 @@ export const dynamic = "force-dynamic";
 const Page = () => {
 
   return (
-    <div>
-      <h1 className="text-lg font-bold">Recent Blocks</h1>
-      <BlocksTable />
+    <div className="flex flex-col gap-5 pt-5">
+      <h1 className="sm:text-2xl font-bold self-center">Recent Blocks</h1>
+      <BlocksTable className="self-center sm:w-2/3 w-full"/>
     </div>
   );
 };

src/app/fonts.tsx

@@ -0,0 +1,104 @@
+import localFont from "next/font/local";
+
+export const ioveskaSans = localFont({
+  variable: "--font-iosevka-sans",
+  src: [
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Bold.woff2",
+      style: "normal",
+      weight: "700",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-BoldItalic.woff2",
+      style: "italic",
+      weight: "700",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-ExtraBold.woff2",
+      style: "normal",
+      weight: "800",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-ExtraBoldItalic.woff2",
+      style: "italic",
+      weight: "800",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-ExtraLight.woff2",
+      style: "normal",
+      weight: "200",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-ExtraLightItalic.woff2",
+      style: "italic",
+      weight: "200",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Heavy.woff2",
+      style: "normal",
+      weight: "900",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-HeavyItalic.woff2",
+      style: "italic",
+      weight: "900",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Italic.woff2",
+      style: "italic",
+      weight: "400",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Light.woff2",
+      style: "normal",
+      weight: "300",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-LightItalic.woff2",
+      style: "italic",
+      weight: "300",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Medium.woff2",
+      style: "normal",
+      weight: "500",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-MediumItalic.woff2",
+      style: "italic",
+      weight: "500",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Regular.woff2",
+      style: "normal",
+      weight: "400",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-SemiBold.woff2",
+      style: "normal",
+      weight: "600",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-SemiBoldItalic.woff2",
+      style: "italic",
+      weight: "600",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-Thin.woff2",
+      style: "normal",
+      weight: "100",
+    },
+    {
+      path: "../../public/fonts/WOFF2/IosevkaSans-ThinItalic.woff2",
+      style: "italic",
+      weight: "100",
+    },
+  ],
+});
+
+export const ioveskaTerm = localFont({
+  variable: "--font-iosevka-mono",
+  src: "../../public/fonts/WOFF2/IosevkaTerm-Regular.woff2",
+  style: "normal",
+  weight: "400",
+});

src/app/globals.css

@@ -73,4 +73,13 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+@layer utilities {
+  .xs-container {
+    @media (max-width: 639px) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+  }
 }

src/app/ibc/channels/page.tsx

@@ -28,16 +28,15 @@ const Page = () => {
     );
   }
 
+  // TODO: clean this up.
   return (
     <div>
       {isFetched ? (
-        <div>
-          <h1 className="text-3xl mx-auto py-5 font-semibold">IBC Channels</h1>
+        <div className="flex flex-col gap-5 pt-5 items-center">
+          <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
         {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         data  ? (
-          <div className="flex flex-col justify-center w-full">
-            <ChannelsTable data={data} />
-          </div>
+          <ChannelsTable className="sm:w-11/12 w-full" data={data} />
         ) : (
           <p>No results</p>
         )}

src/app/ibc/clients/page.tsx

@@ -30,13 +30,11 @@ const Page = () => {
   return (
     <div>
       {isFetched ? (
-        <div>
-          <h1 className="text-3xl mx-auto py-5 font-semibold">IBC Clients</h1>
+        <div className="flex flex-col gap-5 pt-5 items-center">
+          <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
         {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         data  ? (
-          <div className="flex flex-col justify-center w-full">
-            <ClientsTable data={data}/>
-          </div>
+          <ClientsTable className="sm:w-11/12 w-full" data={data}/>
         ) : (
           <p>No results</p>
         )}

src/app/ibc/connections/page.tsx

@@ -31,13 +31,11 @@ const Page = () => {
   return (
     <div>
       {isFetched ? (
-        <div className="flex flex-col justify-center w-full">
-          <h1 className="text-3xl mx-auto py-5 font-semibold">IBC Connections</h1>
+        <div className="flex flex-col gap-5 items-center pt-5">
+          <h1 className="sm:text-2xl font-bold">IBC Connections</h1>
         {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         data  ? (
-          <div className="flex flex-col justify-center w-1/5 ml-auto mr-auto">
-            <ConnectionsTable data={data} />
-          </div>
+          <ConnectionsTable className="sm:w-1/2 w-full" data={data} />
         ) : (
           <p>No results</p>
         )}

src/app/layout.tsx

@@ -1,12 +1,12 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { ioveskaSans, ioveskaTerm } from "./fonts";
 import { cn } from "@/lib/utils";
 import "@/lib/patch-toJSON-BigInt";
 import Navbar from "@/components/Navbar";
 import Providers from "@/components/Providers";
-
-const inter = Inter({ subsets: ["latin"] });
+import { CodeIcon } from "lucide-react";
+import Link from "next/link";
 
 export const metadata: Metadata = {
   title: "Cuiloa",
@@ -16,15 +16,29 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={cn("bg-white text-slate-900 dark:bg-slate-900 dark:text-white antialiased", inter.className)}>
-      <body className="min-h-screen bg-slate-100">
+    <html
+      lang="en"
+      className={cn(
+        "bg-white text-slate-900 dark:bg-slate-900 dark:text-white antialiased",
+        ioveskaSans.variable,
+        ioveskaTerm.variable,
+      )}
+    >
+      <body className="min-w-full min-h-screen">
         <Providers>
           <Navbar />
-          <div className="container max-w-7xl h-full">
-            {children}
+          <div className="flex flex-col container xs-container justify-start min-h-[640px]">
+            <div className="bg-slate-100 p-1 sm:p-2 rounded-lg border-solid border-[1px] border-slate-200 shadow-sm mb-auto">
+              {children}
+            </div>
+            <div className="self-center py-5">
+              <Link href="https://github.com/penumbra-zone/cuiloa">
+                <CodeIcon className="w-4" />
+              </Link>
+            </div>
           </div>
         </Providers>
       </body>