fix: tx size validation handle and button fix

txpipe · Apr 10, 2024 · 41565be · 41565be
1 parent e2e04d4
commit 41565be
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/napi-pallas/src/validations/byron.rs b/napi-pallas/src/validations/byron.rs
@@ -25,6 +25,12 @@ fn get_tx_size(tx: &Tx) -> u64 {
 
 // & The following validation requires the size and the protocol parameters
 fn validate_byron_size(size: &u64, prot_pps: &ByronProtParams) -> Validation {
+  if size == &0 {
+    return Validation::new()
+      .with_name("Transaction size".to_string())
+      .with_value(false)
+      .with_description("The transaction size could not be obtained.".to_string());
+  }
   let res = check_size(&size, &prot_pps);
   let description = set_description(
     &res,

diff --git a/web/app/components.tsx b/web/app/components.tsx
@@ -222,25 +222,32 @@ export function AccordionItem({ validation }: { validation: IValidation }) {
           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
+            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 text-black
+          ${open ? "rotate-45 duration-300" : ""}
+          ${
+            validation.value
+              ? "group-hover:bg-green-400"
+              : "group-hover:bg-red-400"
+          }
         `}
-        >
-          +
-        </div>
+          >
+            +
+          </div>
+        </button>
       </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
+        style={{
+          maxHeight: open ? "500px" : "0",
+          overflow: "hidden",
+          transition: open
+            ? "max-height 0.5s ease-in"
+            : "max-height 0.1s ease-out",
+        }}
+        className="overflow-hidden accordion-item-content "
+      >
+        <p className="text-gray-600 pl-8 pb-4">{validation.description}</p>
       </div>
     </div>
   );
@@ -250,7 +257,7 @@ 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"
+        accordion text-xl font-medium mt-10 overflow-hidden pb-1"
     >
       {props.validations.map((v) => (
         <AccordionItem key={v.name} validation={v} />