From e38a9c9bc8896614bb3f266a52f9d2f47242b737 Mon Sep 17 00:00:00 2001
From: Sara <88407794+mikarasv@users.noreply.github.com>
Date: Tue, 9 Apr 2024 21:37:55 -0300
Subject: [PATCH] feat: introduce tx validation design (#8)

---
 web/app/components.tsx | 127 +++++++++++++++++++++++++++++++++--------
 web/app/routes/tx.tsx  |  91 +++++++++++++++++++++++++++--
 2 files changed, 188 insertions(+), 30 deletions(-)

diff --git a/web/app/components.tsx b/web/app/components.tsx
index 33bf159..aad70cb 100644
--- a/web/app/components.tsx
+++ b/web/app/components.tsx
@@ -1,5 +1,6 @@
-import { PropsWithChildren } from "react";
 import { Attribute, type Section } from "napi-pallas";
+import { PropsWithChildren, useState } from "react";
+import { IValidation } from "./routes/tx";
 
 export type TopicMeta = {
   title: string;
@@ -43,7 +44,7 @@ export function HexBlock(props: { name: string; value: string }) {
   );
 }
 
-export function Paragraph(props: PropsWithChildren<{}>) {
+export function Paragraph(props: PropsWithChildren) {
   return <p className="text-gray-600 text-xl">{props.children}</p>;
 }
 
@@ -59,13 +60,11 @@ export function RootSection(props: {
     <>
       <h4 className="text-3xl">{topic.title}</h4>
       {!props.data.error && topic.description}
-
       {!!props.data.error && (
         <div className="block mt-8 p-4 border-2 bg-red-200 border-red-700 shadow shadow-black rounded-lg text-2xl">
           {props.data.error}
         </div>
       )}
-
       {!!props.data.bytes && (
         <HexBlock name="bytes (hex)" value={props.data.bytes} />
       )}
@@ -84,30 +83,46 @@ export function DataSection(props: {
   topics: Record<string, TopicMeta>;
 }) {
   const topic = getTopicMeta(props.data.topic, props.topics);
+  const [open, setOpen] = useState(true);
+  const handleClick = () => setOpen(!open);
 
   return (
     <blockquote className="mt-6 md:border-l-4 md:px-10 py-4 border-dashed">
-      <h4 className="text-3xl">{topic.title}</h4>
-      {topic.description}
-      {!!props.data.error && (
-        <div className="block mt-8 p-4 border-2 bg-red-200 border-red-700 shadow shadow-black rounded-lg text-2xl">
-          {props.data.error}
+      <button
+        className={`flex items-center w-full text-left select-none duration-300`}
+        onClick={handleClick}
+      >
+        <div
+          className={`h-8 w-8 inline-flex items-center justify-center duration-300 `}
+        >
+          {open ? "▼" : "▶"}
         </div>
-      )}
-      {props.data.attributes?.map((c) => (
-        <PropBlock key={c.topic} data={c} topics={props.topics} />
-      ))}
-
-      {props.data.children?.map((c) => (
-        <DataSection key={c.identity} data={c} topics={props.topics} />
-      ))}
-
-      {!props.data.attributes?.length && !props.data.children?.length && (
-        <EmptyBlock />
-      )}
-
-      {!!props.data.bytes && (
-        <HexBlock name={`${topic.title} CBOR (hex)`} value={props.data.bytes} />
+        <h4 className="text-3xl">{topic.title}</h4>
+      </button>
+      {open && (
+        <>
+          {topic.description}
+          {!!props.data.error && (
+            <div className="block mt-8 p-4 border-2 bg-red-200 border-red-700 shadow shadow-black rounded-lg text-2xl">
+              {props.data.error}
+            </div>
+          )}
+          {props.data.attributes?.map((c) => (
+            <PropBlock key={c.topic} data={c} topics={props.topics} />
+          ))}
+          {props.data.children?.map((c) => (
+            <DataSection key={c.identity} data={c} topics={props.topics} />
+          ))}
+          {!props.data.attributes?.length && !props.data.children?.length && (
+            <EmptyBlock />
+          )}
+          {!!props.data.bytes && (
+            <HexBlock
+              name={`${topic.title} CBOR (hex)`}
+              value={props.data.bytes}
+            />
+          )}
+        </>
       )}
     </blockquote>
   );
@@ -145,7 +160,7 @@ export function TextArea(props: { name: string; placeholder?: string }) {
 }
 
 export function logCuriosity(data: any) {
-  if (!!data) {
+  if (data) {
     console.group("CURIOUS FELLOW, EH?");
     console.log("hello there! want to learn how we parse the data?");
     console.log(
@@ -159,3 +174,65 @@ export function logCuriosity(data: any) {
     console.groupEnd();
   }
 }
+
+export function AccordionItem({ validation }: { validation: IValidation }) {
+  const [open, setOpen] = useState(false);
+  const handleClick = () => setOpen(!open);
+  return (
+    <div
+      key={validation.name}
+      className={`px-3 py-2 border-2 rounded-xl 
+      shadow shadow-black 
+        ${
+          validation.value
+            ? "bg-green-200 border-green-700"
+            : "bg-red-200 border-red-700"
+        }
+    `}
+    >
+      <div className="flex justify-between group">
+        <button
+          className={`flex items-center justify-between w-full px-4 pt-2 text-left select-none duration-300 ${
+            validation.value
+              ? "text-green-950 group-hover:text-green-500"
+              : "text-red-950 group-hover:text-red-500"
+          }`}
+          onClick={handleClick}
+        >
+          {validation.value ? "✔" : "✘"}&nbsp;&nbsp;{validation.name}
+        </button>
+        <div
+          className={`m-4 h-8 w-8 border-2 border-black inline-flex items-center justify-center 
+        rounded-full shadow-tiny shadow-black bg-white duration-300 
+        ${open ? "rotate-45 duration-300" : ""}
+        ${
+          validation.value
+            ? "group-hover:bg-green-400"
+            : "group-hover:bg-red-400"
+        }
+        `}
+        >
+          +
+        </div>
+      </div>
+      <div className="accordion-item-content transition-all ease-in-out transform scale-100 opacity-100">
+        {open && (
+          <p className="text-gray-600 pl-8 pb-4">{validation.description}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ValidationAccordion(props: { validations: IValidation[] }) {
+  return (
+    <div
+      className="flex flex-col gap-3 relative w-full mx-auto lg:col-span-2
+                    text-xl font-medium mt-10 overflow-hidden pb-1"
+    >
+      {props.validations.map((v) => (
+        <AccordionItem key={v.name} validation={v} />
+      ))}
+    </div>
+  );
+}
diff --git a/web/app/routes/tx.tsx b/web/app/routes/tx.tsx
index d88b14b..bc4b149 100644
--- a/web/app/routes/tx.tsx
+++ b/web/app/routes/tx.tsx
@@ -1,9 +1,25 @@
 import { ActionFunctionArgs, json, type MetaFunction } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
-import { Button, logCuriosity, RootSection } from "~/components";
+import { useState } from "react";
+import {
+  Button,
+  logCuriosity,
+  RootSection,
+  ValidationAccordion,
+} from "../components";
 import * as server from "./tx.server";
 import TOPICS from "./tx.topics";
 
+export interface IValidation {
+  name: string;
+  value: boolean;
+  description: string;
+}
+
+export interface IValidations {
+  validations: IValidation[];
+}
+
 export const meta: MetaFunction = () => {
   return [
     { title: "Cardano Tx - Lovelace Anatomy" },
@@ -13,9 +29,9 @@ export const meta: MetaFunction = () => {
 
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData();
-  let raw = formData.get("raw");
+  const raw = formData.get("raw");
 
-  if (!!raw) {
+  if (raw) {
     const res = server.safeParseTx(raw.toString());
     return json({ ...res, raw });
   } else {
@@ -41,10 +57,57 @@ function ExampleCard(props: { title: string; address: string }) {
 }
 
 export default function Index() {
-  const data: any = useActionData();
+  const data = useActionData();
+
+  const [open, setOpen] = useState(false);
+  const handleClick = () => setOpen(!open);
 
   logCuriosity(data);
 
+  const validations: IValidation[] = [
+    { name: "Non empty inputs", value: true, description: "Sucessful" },
+    {
+      name: "All inputs in utxos",
+      value: false,
+      description:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro id maiores exercitationem asperiores molestias assumenda doloremque magnam fugit. Iure dolorum fugit facilis autem incidunt vero necessitatibus consectetur ducimus recusandae blanditiis!",
+    },
+    { name: "Validity interval", value: true, description: "Sucessful" },
+    { name: "Fee", value: true, description: "Sucessful" },
+    {
+      name: "Preservation of value",
+      value: false,
+      description:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro id maiores exercitationem asperiores molestias assumenda doloremque magnam fugit. Iure dolorum fugit facilis autem incidunt vero necessitatibus consectetur ducimus recusandae blanditiis!",
+    },
+    {
+      name: "Min lovelace per UTxO",
+      value: false,
+      description:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro id maiores exercitationem asperiores molestias assumenda doloremque magnam fugit. Iure dolorum fugit facilis autem incidunt vero necessitatibus consectetur ducimus recusandae blanditiis!",
+    },
+    { name: "Output value size", value: true, description: "Successful" },
+    { name: "Network Id", value: true, description: "Successful" },
+    { name: "Tx size", value: true, description: "Successful" },
+    { name: "Tx execution units", value: true, description: "Successful" },
+    { name: "Minting", value: true, description: "Successful" },
+    {
+      name: "Well formed",
+      value: false,
+      description:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro id maiores exercitationem asperiores molestias assumenda doloremque magnam fugit. Iure dolorum fugit facilis autem incidunt vero necessitatibus consectetur ducimus recusandae blanditiis!",
+    },
+    { name: "Script witness", value: true, description: "Successful" },
+    { name: "Languages", value: true, description: "Successful" },
+    {
+      name: "Auxiliary data hash",
+      value: false,
+      description:
+        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro id maiores exercitationem asperiores molestias assumenda doloremque magnam fugit. Iure dolorum fugit facilis autem incidunt vero necessitatibus consectetur ducimus recusandae blanditiis!",
+    },
+    { name: "Script data hash", value: true, description: "Successful" },
+  ];
+
   return (
     <main className="mt-10 px-4">
       <h1 className="text-5xl lg:text-7xl text-black">Cardano Tx</h1>
@@ -82,7 +145,25 @@ export default function Index() {
         </>
       )}
 
-      {!!data && <RootSection data={data} topics={TOPICS} />}
+      {!!data && (
+        <div className="flex flex-col">
+          <div className="mb-14">
+            <button
+              className={`flex items-center w-full text-left select-none duration-300`}
+              onClick={handleClick}
+            >
+              <div
+                className={`h-8 w-8 inline-flex items-center justify-center duration-300 `}
+              >
+                {open ? "▼" : "▶"}
+              </div>
+              <h4 className="text-3xl ">Tx Validations</h4>
+            </button>
+            {open && <ValidationAccordion validations={validations} />}
+          </div>
+          <RootSection data={data} topics={TOPICS} />
+        </div>
+      )}
     </main>
   );
 }