From 16626976229c40c2507936b263b9781e36c4996b Mon Sep 17 00:00:00 2001
From: Jeesun Kim <jeesunkim@Jeesuns-MacBook-Pro.local>
Date: Fri, 14 Jun 2024 17:03:55 -0700
Subject: [PATCH] updates

---
 .../submit/components/ErrorResponse.tsx       | 37 ++++++---
 src/app/(sidebar)/transaction/submit/page.tsx | 76 ++++++-------------
 src/store/createStore.ts                      | 12 ---
 3 files changed, 51 insertions(+), 74 deletions(-)

diff --git a/src/app/(sidebar)/transaction/submit/components/ErrorResponse.tsx b/src/app/(sidebar)/transaction/submit/components/ErrorResponse.tsx
index f21ea931..0c5c3af0 100644
--- a/src/app/(sidebar)/transaction/submit/components/ErrorResponse.tsx
+++ b/src/app/(sidebar)/transaction/submit/components/ErrorResponse.tsx
@@ -29,26 +29,42 @@ export const ErrorResponse = ({ error }: ErrorProps) => {
       <Box gap="xs">
         <div>
           <div>Destination account:</div>
-          <div>{error.accountId}</div>
+          <Box gap="sm" direction="row">
+            <div></div>
+            <div>{error.accountId}</div>
+          </Box>
         </div>
         <div>
           <div>Operation index:</div>
-          {error.operationIndex}
+          <Box gap="sm" direction="row">
+            <div></div>
+            <div>{error.operationIndex}</div>
+          </Box>
         </div>
       </Box>
     );
-  } else if (error?.response) {
-    const { result_codes, result_xdr } = error.response.data?.extras || {};
+  } else if (
+    error?.response &&
+    error.response.data?.extras?.result_codes &&
+    error.response.data?.extras.result_xdr
+  ) {
+    const { result_codes, result_xdr } = error.response.data.extras;
     message = error.message;
     extras = (
       <Box gap="xs">
-        <div>
-          <div>extras.result_codes:</div>
+        <div>extras.result_codes:</div>
+
+        <Box gap="sm" direction="row">
+          <div></div>
           <div>{JSON.stringify(result_codes)}</div>
-        </div>
+        </Box>
+
         <div>
           <div>Result XDR:</div>
-          <div>{result_xdr}</div>
+          <Box gap="sm" direction="row">
+            <div></div>
+            <div>{result_xdr}</div>
+          </Box>
         </div>
       </Box>
     );
@@ -61,7 +77,10 @@ export const ErrorResponse = ({ error }: ErrorProps) => {
       <Box gap="xs">
         <div>
           <div>original error:</div>
-          <div>{JSON.stringify(error, null, 2)}</div>
+          <Box gap="sm" direction="row">
+            <div></div>
+            <div>{JSON.stringify(error, null, 2)}</div>
+          </Box>
         </div>
       </Box>
     );
diff --git a/src/app/(sidebar)/transaction/submit/page.tsx b/src/app/(sidebar)/transaction/submit/page.tsx
index 4d509144..ae595c1e 100644
--- a/src/app/(sidebar)/transaction/submit/page.tsx
+++ b/src/app/(sidebar)/transaction/submit/page.tsx
@@ -14,29 +14,24 @@ import { TransactionResponse, useSubmitTx } from "@/query/useSubmitTx";
 
 import { Box } from "@/components/layout/Box";
 import { PrettyJson } from "@/components/PrettyJson";
-import { Tabs } from "@/components/Tabs";
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
 import { ValidationResponseCard } from "@/components/ValidationResponseCard";
 import { ErrorResponse } from "./components/ErrorResponse";
 
 export default function SubmitTransaction() {
-  const { network, transaction } = useStore();
-  const { updateXdrBlob, submit } = transaction;
+  const { network, xdr } = useStore();
+  const { blob, updateXdrBlob } = xdr;
 
-  const { xdrBlob } = submit;
-
-  const isXdrInit = useIsXdrInit();
-
-  const [activeTab, setActiveTab] = useState<string>("json");
   const [txErr, setTxErr] = useState<any | null>(null);
   const [txResponse, setTxResponse] = useState<TransactionResponse | null>(
     null,
   );
 
+  const isXdrInit = useIsXdrInit();
   const submitTx = useSubmitTx();
 
   const onSubmit = () => {
-    const transaction = TransactionBuilder.fromXDR(xdrBlob, network.passphrase);
+    const transaction = TransactionBuilder.fromXDR(blob, network.passphrase);
 
     const server = new Horizon.Server(network.horizonUrl, {
       appName: "Laboratory",
@@ -51,15 +46,15 @@ export default function SubmitTransaction() {
     );
   };
 
-  const xdrDecodeJson = () => {
+  const getXdrJson = () => {
     const xdrType = "TransactionEnvelope";
 
-    if (!(isXdrInit && xdrBlob)) {
+    if (!(isXdrInit && blob)) {
       return null;
     }
 
     try {
-      const xdrJson = StellarXdr.decode(xdrType, xdrBlob);
+      const xdrJson = StellarXdr.decode(xdrType, blob);
 
       return {
         jsonString: xdrJson,
@@ -68,13 +63,12 @@ export default function SubmitTransaction() {
     } catch (e) {
       return {
         jsonString: "",
-        error: `Unable to decode input as TransactionEnvelope`,
+        error: `Unable to decode input as ${xdrType}`,
       };
     }
   };
 
-  const xdrJsonDecoded = xdrDecodeJson();
-  const isXdrData = Boolean(xdrJsonDecoded?.jsonString);
+  const xdrJson = getXdrJson();
 
   return (
     <Box gap="md">
@@ -84,12 +78,12 @@ export default function SubmitTransaction() {
         </Text>
       </div>
       <Card>
-        <div className="SignTx__xdr">
+        <Box gap="md">
           <XdrPicker
             id="submit-tx-xdr"
             label="Input a base-64 encoded TransactionEnvelope:"
-            value={xdrBlob}
-            error={xdrJsonDecoded?.error || ""}
+            value={blob}
+            error={xdrJson?.error || ""}
             onChange={(e) => {
               updateXdrBlob(e.target.value);
             }}
@@ -99,7 +93,7 @@ export default function SubmitTransaction() {
 
           <div className="SignTx__CTA">
             <Button
-              disabled={!xdrBlob || Boolean(xdrJsonDecoded?.error)}
+              disabled={!blob || Boolean(xdrJson?.error)}
               isLoading={submitTx.status === "pending"}
               size="md"
               variant={"secondary"}
@@ -111,34 +105,24 @@ export default function SubmitTransaction() {
 
           <Box gap="lg" direction="row" align="center" justify="end">
             <div>
-              {isXdrData ? (
-                <Tabs
-                  tabs={[
-                    { id: "json", label: "JSON" },
-                    { id: "decoded", label: "Decoded XDR" },
-                  ]}
-                  activeTabId={activeTab}
-                  onChange={(id) => {
-                    setActiveTab(id);
-                  }}
-                />
+              {xdrJson?.jsonString ? (
+                <div className="Tabs">
+                  <div className="Tab" data-is-active="true">
+                    JSON
+                  </div>
+                </div>
               ) : null}
             </div>
           </Box>
-          <>
-            {activeTab === "json" && xdrJsonDecoded?.jsonString ? (
-              <div className="PageBody__content PageBody__scrollable">
-                <PrettyJson json={JSON.parse(xdrJsonDecoded.jsonString)} />
-              </div>
-            ) : null}
 
-            {activeTab === "decoded" ? (
+          <>
+            {xdrJson?.jsonString ? (
               <div className="PageBody__content PageBody__scrollable">
-                TODO: Decoded XDR
+                <PrettyJson json={JSON.parse(xdrJson.jsonString)} />
               </div>
             ) : null}
           </>
-        </div>
+        </Box>
       </Card>
       <>
         {submitTx.status === "success" && txResponse ? (
@@ -174,20 +158,6 @@ export default function SubmitTransaction() {
                 </div>
               </Box>
             }
-            // @TODO: the current lab doesn't support displaying stellar.expert
-            // To confirm with Charles
-            // note={<></>}
-            // footerLeftEl={
-            //   <Button
-            //     size="md"
-            //     variant="tertiary"
-            //     onClick={() => {
-            //       alert("TODO: handle sign transaction flow");
-            //     }}
-            //   >
-            //     View on stellar.expert
-            //   </Button>
-            // }
           />
         ) : null}
       </>
diff --git a/src/store/createStore.ts b/src/store/createStore.ts
index f19c1ce0..d34e0b4f 100644
--- a/src/store/createStore.ts
+++ b/src/store/createStore.ts
@@ -95,9 +95,6 @@ export interface Store {
       bipPath: string;
       hardWalletSigs: xdr.DecoratedSignature[] | [];
     };
-    submit: {
-      xdrBlob: string;
-    };
     // [Transaction] Build Transaction actions
     updateBuildActiveTab: (tabId: string) => void;
     updateBuildParams: (params: TransactionBuildParamsObj) => void;
@@ -124,8 +121,6 @@ export interface Store {
     updateHardWalletSigs: (signer: xdr.DecoratedSignature[]) => void;
     resetSign: () => void;
     resetSignHardWalletSigs: () => void;
-    // [Transaction] Submit Transaction actions
-    updateXdrBlob: (blob: string) => void;
   };
 
   // XDR
@@ -180,9 +175,6 @@ const initTransactionState = {
     bipPath: "44'/148'/0'",
     hardWalletSigs: [],
   },
-  submit: {
-    xdrBlob: "",
-  },
 };
 
 const initAccountState = {
@@ -367,10 +359,6 @@ export const createStore = (options: CreateStoreOptions) =>
               state.transaction.sign.hardWalletSigs =
                 initTransactionState.sign.hardWalletSigs;
             }),
-          updateXdrBlob: (blob: string) =>
-            set((state) => {
-              state.transaction.submit.xdrBlob = blob;
-            }),
         },
         xdr: {
           ...initXdrState,