From cdd7ffacdadfa03d6d2508182cf69355557a7751 Mon Sep 17 00:00:00 2001
From: sara <victoriasarakim.sk@gmail.com>
Date: Fri, 5 Apr 2024 16:24:29 -0300
Subject: [PATCH] feat: connection to front end

---
 napi-pallas/src/validations/babbage.rs |  4 +-
 web/app/components.tsx                 | 35 ++++++++---
 web/app/routes/tx.tsx                  | 81 +++-----------------------
 3 files changed, 37 insertions(+), 83 deletions(-)

diff --git a/napi-pallas/src/validations/babbage.rs b/napi-pallas/src/validations/babbage.rs
index 8a8a6c6..9006454 100644
--- a/napi-pallas/src/validations/babbage.rs
+++ b/napi-pallas/src/validations/babbage.rs
@@ -17,8 +17,6 @@ fn validate_babbage_ins_not_empty(mtx: &BabbageMintedTx) -> Validation {
 }
 
 pub fn validate_babbage(mtx_b: &BabbageMintedTx) -> Validations {
-  let out = Validations::new()
-    .add_new_validation(validate_babbage_ins_not_empty(&mtx_b))
-    .add_new_validation(validate_babbage_ins_not_empty(&mtx_b));
+  let out = Validations::new().add_new_validation(validate_babbage_ins_not_empty(&mtx_b));
   out
 }
diff --git a/web/app/components.tsx b/web/app/components.tsx
index aad70cb..566e3af 100644
--- a/web/app/components.tsx
+++ b/web/app/components.tsx
@@ -53,18 +53,37 @@ export const P1 = Paragraph;
 export function RootSection(props: {
   data: Section;
   topics: Record<string, TopicMeta>;
+  validations: IValidation[];
 }) {
+  const [open, setOpen] = useState(false);
+  const handleClick = () => setOpen(!open);
   const topic = getTopicMeta(props.data.topic, props.topics);
 
+  if (props.data.error)
+    return (
+      <div className="block mt-8 p-4 border-2 bg-red-200 border-red-700 shadow shadow-black rounded-lg text-2xl">
+        <h4 className="text-3xl">{topic.description}</h4>
+        {props.data.error}
+      </div>
+    );
+
   return (
-    <>
+    <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={props.validations} />}
+      </div>
       <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} />
       )}
@@ -74,7 +93,7 @@ export function RootSection(props: {
       {props.data.children?.map((c) => (
         <DataSection key={c.identity} data={c} topics={props.topics} />
       ))}
-    </>
+    </div>
   );
 }
 
diff --git a/web/app/routes/tx.tsx b/web/app/routes/tx.tsx
index bc4b149..f3b166a 100644
--- a/web/app/routes/tx.tsx
+++ b/web/app/routes/tx.tsx
@@ -1,12 +1,6 @@
 import { ActionFunctionArgs, json, type MetaFunction } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
-import { useState } from "react";
-import {
-  Button,
-  logCuriosity,
-  RootSection,
-  ValidationAccordion,
-} from "../components";
+import { Button, logCuriosity, RootSection } from "../components";
 import * as server from "./tx.server";
 import TOPICS from "./tx.topics";
 
@@ -32,8 +26,12 @@ export async function action({ request }: ActionFunctionArgs) {
   const raw = formData.get("raw");
 
   if (raw) {
-    const res = server.safeParseTx(raw.toString());
-    return json({ ...res, raw });
+    const { section, validations } = server.safeParseTx(raw.toString());
+    return json({
+      ...section,
+      raw,
+      ...validations,
+    });
   } else {
     return json({ error: "an empty value? seriously?" });
   }
@@ -59,54 +57,9 @@ function ExampleCard(props: { title: string; address: string }) {
 export default function Index() {
   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" },
-  ];
+  const validations: IValidation[] = data?.validations || [];
 
   return (
     <main className="mt-10 px-4">
@@ -146,23 +99,7 @@ export default function Index() {
       )}
 
       {!!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>
+        <RootSection data={data} topics={TOPICS} validations={validations} />
       )}
     </main>
   );