wip

src/app/(sidebar)/transaction/sign/page.tsx

@@ -2,18 +2,22 @@
 
 import { useState } from "react";
 import { Alert, Card, Icon, Text, Button } from "@stellar/design-system";
+import { TransactionBuilder } from "@stellar/stellar-sdk";
+
+import { useStore } from "@/store/useStore";
 
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
 import { validate } from "@/validate";
 
 export default function SignTransaction() {
-  const [txInput, setTxInput] = useState<string>("");
+  const { network } = useStore();
+  const [txEnv, setTxEnv] = useState<string>("");
   const [isTxValid, setIsTxValid] = useState<boolean | undefined>(undefined);
   const [txError, setTxError] = useState<string>("");
 
   const onChange = (value: string) => {
     setTxError("");
-    setTxInput(value);
+    setTxEnv(value);
 
     if (value.length > 0) {
       const validatedXDR = validate.xdr(value);
@@ -27,6 +31,12 @@ export default function SignTransaction() {
     }
   };
 
+  const onImport = () => {
+    let transaction = TransactionBuilder.fromXDR(txEnv, network.passphrase);
+
+    console.log("[onImport] transaction: ", transaction);
+  };
+
   return (
     <div className="SignTx">
       <Card>
@@ -41,17 +51,17 @@ export default function SignTransaction() {
                 </span>
               </Text>
             }
-            value={txInput || ""}
+            value={txEnv || ""}
             error={txError}
             onChange={(e) => onChange(e.target.value)}
           />
 
           <div className="SignTx__CTA">
             <Button
-              disabled={!txInput || !isTxValid}
+              disabled={!txEnv || !isTxValid}
               size="md"
               variant={"secondary"}
-              // onClick={parseMuxedAccount}
+              onClick={onImport}
             >
               Import transaction
             </Button>

src/components/FormElements/FieldViewer.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  Input,
+  InputProps,
+  Textarea,
+  TextareaProps,
+} from "@stellar/design-system";
+
+const MIN_LENGTH_FOR_FULL_WIDTH_FIELD = 30;
+
+interface FieldViewerProps extends Omit<InputProps, "fieldSize"> {
+  id: string;
+  fieldSize?: "sm" | "md" | "lg";
+  label: string;
+  labelSuffix?: string | React.ReactNode;
+  placeholder?: string;
+  readOnly?: boolean;
+  value: string;
+  error: string | undefined;
+  onChange?: (e: React.ChangeEvent<any>) => void;
+}
+
+// length > 30 to be a full width
+
+export const FieldViewer = ({
+  id,
+  fieldSize = "md",
+  label,
+  labelSuffix,
+  placeholder = "Ex: GCEXAMPLE5HWNK4AYSTEQ4UWDKHTCKADVS2AHF3UI2ZMO3DPUSM6Q4UG",
+  value,
+  error,
+  readOnly,
+  ...props
+}: FieldViewerProps) => (
+  <Input
+    id={id}
+    fieldSize={fieldSize}
+    label={label}
+    labelSuffix={labelSuffix}
+    placeholder={placeholder}
+    value={value}
+    error={error}
+    {...props}
+  />
+);

src/constants/signTransactionPage.ts

@@ -1,94 +1,95 @@
-import { FeeBumpTransaction } from "@stellar/stellar-sdk";
+import { FeeBumpTransaction, Transaction } 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
-    },
-  ];
-};
+// {
+//   label: "Signing for",
+//   type: "all",
+//   // component type
+// },
+// {
+//   label: "Transaction Envelope XDR",
+//   type: "all",
+//   // component type
+// },
+// {
+//   label: "Transaction Hash",
+//   type: "all",
+//   // component type
+// },
+
+const getFeeBumpTxFields = (feeBumpTx: FeeBumpTransaction) => [
+  {
+    label: "Fee source account",
+    value: feeBumpTx.feeSource,
+    // component type
+  },
+  {
+    label: "Transaction Fee (stroops)",
+    value: feeBumpTx.fee,
+    // component type
+  },
+  {
+    label: "Number of existing signatures",
+    value: feeBumpTx.signatures.length,
+    // component type
+  },
+  {
+    label: "Inner transaction hash",
+    value: feeBumpTx.innerTransaction.hash().toString("hex"),
+    // component type
+  },
+  {
+    label: "Inner transaction source account",
+    value: feeBumpTx.innerTransaction.source,
+    // component type
+  },
+  {
+    label: "Inner transaction sequence number",
+    value: feeBumpTx.innerTransaction.sequence,
+    // component type
+  },
+  {
+    label: "Inner transaction fee (stroops)",
+    value: feeBumpTx.innerTransaction.fee,
+    // component type
+  },
+  {
+    label: "Inner transaction number of operations",
+    value: feeBumpTx.innerTransaction.operations.length,
+    // component type
+  },
+  {
+    label: "Inner transaction number of existing signatures",
+    value: feeBumpTx.innerTransaction.signatures.length,
+    // component type
+  },
+];
+const getTxFields = (transaction: Transaction) => [
+  {
+    label: "Source account",
+    value: transaction.source,
+    // component type
+  },
+  {
+    label: "Sequence number",
+    value: transaction.sequence,
+    // component type
+  },
+  {
+    label: "Transaction Fee (stroops)",
+    value: transaction.fee,
+    // component type
+  },
+  {
+    label: "Number of operations",
+    value: transaction.operations.length,
+    // component type
+  },
+  {
+    label: "Number of existing signatures",
+    value: transaction.signatures.length,
+    // component type
+  },
+];