From b6d19930c74dfe466134f22748bbb1c273ad30d6 Mon Sep 17 00:00:00 2001
From: Jeesun Kim <jeesunkim@Jeesuns-MBP.localdomain>
Date: Tue, 9 Apr 2024 17:34:48 -0700
Subject: [PATCH] wip

---
 .../explore-endpoints/[[...pages]]/page.tsx   |  2 +
 src/app/(sidebar)/transaction/sign/page.tsx   | 37 +++-----
 src/constants/signTransactionPage.ts          | 94 +++++++++++++++++++
 src/helpers/trim.ts                           |  3 +
 src/types/types.ts                            | 10 ++
 src/validate/methods/xdr.ts                   | 17 +++-
 6 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 src/constants/signTransactionPage.ts
 create mode 100644 src/helpers/trim.ts

diff --git a/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
index 122b7171e..9cfbda135 100644
--- a/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
+++ b/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
@@ -46,6 +46,8 @@ export default function ExploreEndpoints() {
     .find((page) => pathname.includes(page.route))
     ?.nestedItems?.find((i) => i.route === pathname);
 
+  console.log("page: ", page);
+
   const pageData = page?.form;
   const requiredFields = sanitizeArray(
     pageData?.requiredParams?.split(",") || [],
diff --git a/src/app/(sidebar)/transaction/sign/page.tsx b/src/app/(sidebar)/transaction/sign/page.tsx
index 3a2d7454e..b322b0087 100644
--- a/src/app/(sidebar)/transaction/sign/page.tsx
+++ b/src/app/(sidebar)/transaction/sign/page.tsx
@@ -3,41 +3,30 @@
 import { useState } from "react";
 import { Alert, Card, Icon, Text, Button } from "@stellar/design-system";
 
-import { useStore } from "@/store/useStore";
-
-import { ExpandBox } from "@/components/ExpandBox";
-import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
-import { MuxedAccountResult } from "@/components/MuxedAccountResult";
-import { SdsLink } from "@/components/SdsLink";
-
-import { muxedAccount } from "@/helpers/muxedAccount";
-
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
-
 import { validate } from "@/validate";
-import { collapseTextChangeRangesAcrossMultipleVersions } from "typescript";
-import { unescape } from "querystring";
 
 export default function SignTransaction() {
   const [txInput, setTxInput] = useState<string>("");
   const [isTxValid, setIsTxValid] = useState<boolean | undefined>(undefined);
-
-  const [muxedFieldError, setMuxedFieldError] = useState<string>("");
-  const [sdkError, setSdkError] = useState<string>("");
+  const [txError, setTxError] = useState<string>("");
 
   const onChange = (value: string) => {
+    setTxError("");
     setTxInput(value);
 
-    const isValid = Boolean(validate.xdr(txInput));
-
-    console.log("**LOG** validate.xdr(txInput): ", validate.xdr(txInput));
-    console.log("**LOG** isValid: ", isValid);
+    if (value.length > 0) {
+      const validatedXDR = validate.xdr(value);
 
-    setIsTxValid(isValid);
+      if (validatedXDR.result === "success") {
+        setIsTxValid(true);
+      } else if (validatedXDR.result === "error") {
+        setIsTxValid(false);
+        setTxError(validatedXDR.message);
+      }
+    }
   };
 
-  console.log("**LOG** txInput: ", txInput);
-
   return (
     <div className="SignTx">
       <Card>
@@ -53,13 +42,13 @@ export default function SignTransaction() {
               </Text>
             }
             value={txInput || ""}
-            error={sdkError}
+            error={txError}
             onChange={(e) => onChange(e.target.value)}
           />
 
           <div className="SignTx__CTA">
             <Button
-              // disabled={!muxedAddress || Boolean(muxedFieldError)}
+              disabled={!txInput || !isTxValid}
               size="md"
               variant={"secondary"}
               // onClick={parseMuxedAccount}
diff --git a/src/constants/signTransactionPage.ts b/src/constants/signTransactionPage.ts
new file mode 100644
index 000000000..f4b6ac9b4
--- /dev/null
+++ b/src/constants/signTransactionPage.ts
@@ -0,0 +1,94 @@
+import { FeeBumpTransaction } from "@stellar/stellar-sdk";
+
+import { Routes } from "@/constants/routes";
+import { AnyObject } from "@/types/types";
+
+type SignTransactionPagesProps = {
+  overview: [
+    {
+      label: "Signing for";
+      type: "all";
+      // component type
+    },
+    {
+      label: "Transaction Envelope XDR";
+      type: "all";
+      // component type
+    },
+    {
+      label: "Transaction Hash";
+      type: "all";
+      // component type
+    },
+    {
+      label: "Fee source account";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Transaction Fee (stroops)";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Number of existing signatures";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction hash";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction source account";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction sequence number";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction fee (stroops)";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction number of operations";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Inner transaction number of existing signatures";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Source account";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Sequence number";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Transaction Fee (stroops)";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Number of operations";
+      type: FeeBumpTransaction;
+      // component type
+    },
+    {
+      label: "Number of existing signatures";
+      type: FeeBumpTransaction;
+      // component type
+    },
+  ];
+};
diff --git a/src/helpers/trim.ts b/src/helpers/trim.ts
new file mode 100644
index 000000000..6d8f75e46
--- /dev/null
+++ b/src/helpers/trim.ts
@@ -0,0 +1,3 @@
+// Regex explained: https://regexr.com/4v6jg
+export const trim = (str: string, c = "\\s") =>
+  str.replace(new RegExp(`^([${c}]*)(.*?)([${c}]*)$`), "$2");
diff --git a/src/types/types.ts b/src/types/types.ts
index 8268d9d96..b54bd80de 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -82,6 +82,16 @@ export type AssetObject = {
   value: AssetObjectValue;
 };
 
+// =============================================================================
+// Sign Transaction
+// =============================================================================
+
+export type SignTxPageComponent = {
+  [key: string]: any;
+  id: string;
+  name: string;
+};
+
 // =============================================================================
 // Component
 // =============================================================================
diff --git a/src/validate/methods/xdr.ts b/src/validate/methods/xdr.ts
index a11513e01..22400bdc8 100644
--- a/src/validate/methods/xdr.ts
+++ b/src/validate/methods/xdr.ts
@@ -1,21 +1,28 @@
+import { trim } from "@/helpers/trim";
 import { xdr as stellarXDR } from "@stellar/stellar-sdk";
 
 const validateBase64 = (value: string) => {
   if (value.match(/^[-A-Za-z0-9+/=]*$/) === null) {
-    return "Input is not valid base64";
+    return {
+      result: "error",
+      message: "The input is not valid base64 (a-zA-Z0-9+/=).",
+    };
   }
 
-  return true;
+  return { result: "success", message: "Valid Base64" };
 };
 
 export const xdr = (value: string) => {
-  let base64Validation = validateBase64(value);
-  if (!base64Validation) {
+  let sanitizedXdr = trim(value);
+  let base64Validation = validateBase64(sanitizedXdr);
+
+  if (base64Validation.result !== "success") {
     return base64Validation;
   }
 
   try {
-    stellarXDR.TransactionEnvelope.fromXDR(value, "base64");
+    stellarXDR.TransactionEnvelope.fromXDR(sanitizedXdr, "base64");
+
     return {
       result: "success",
       message: "Valid Transaction Envelope XDR",