[sing in tx] wip

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

@@ -1,5 +1,92 @@
 "use client";
 
+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() {
-  return <div>Sign Transaction</div>;
+  const [txInput, setTxInput] = useState<string>("");
+  const [isTxValid, setIsTxValid] = useState<boolean | undefined>(undefined);
+
+  const [muxedFieldError, setMuxedFieldError] = useState<string>("");
+  const [sdkError, setSdkError] = useState<string>("");
+
+  const onChange = (value: string) => {
+    setTxInput(value);
+
+    const isValid = Boolean(validate.xdr(txInput));
+
+    console.log("**LOG** validate.xdr(txInput): ", validate.xdr(txInput));
+    console.log("**LOG** isValid: ", isValid);
+
+    setIsTxValid(isValid);
+  };
+
+  console.log("**LOG** txInput: ", txInput);
+
+  return (
+    <div className="SignTx">
+      <Card>
+        <div className="SignTx__xdr">
+          <XdrPicker
+            id="sign-transaction-xdr"
+            label={
+              <Text size="xs" as="span" weight="medium">
+                Import a transaction envelope in XDR format
+                <span className="SignTx__icon">
+                  <Icon.AlertCircle />
+                </span>
+              </Text>
+            }
+            value={txInput || ""}
+            error={sdkError}
+            onChange={(e) => onChange(e.target.value)}
+          />
+
+          <div className="SignTx__CTA">
+            <Button
+              // disabled={!muxedAddress || Boolean(muxedFieldError)}
+              size="md"
+              variant={"secondary"}
+              // onClick={parseMuxedAccount}
+            >
+              Import transaction
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <Alert
+        placement="inline"
+        variant="primary"
+        actionLink="https://developers.stellar.org/network/horizon/resources"
+        actionLabel="Read more about signatures on the developer's site"
+      >
+        <Text size="sm" as="p">
+          The transaction signer lets you add signatures to a Stellar
+          transaction. Signatures are used in the network to prove that the
+          account is authorized to perform the operations in the transaction.
+        </Text>
+        <Text size="sm" as="p">
+          For simple transactions, you only need one signature from the correct
+          account. Some advanced transactions may require more than one
+          signature if there are multiple source accounts or signing keys.
+        </Text>
+      </Alert>
+    </div>
+  );
 }

src/components/FormElements/XdrPicker.tsx

@@ -5,7 +5,7 @@ interface XdrPickerProps extends Omit<TextareaProps, "fieldSize"> {
   id: string;
   fieldSize?: "sm" | "md" | "lg";
   labelSuffix?: string | React.ReactNode;
-  label: string;
+  label: string | React.ReactNode;
   value: string;
   placeholder?: string;
   error: string | undefined;
@@ -21,19 +21,17 @@ export const XdrPicker = ({
   error,
   onChange,
   ...props
-}: XdrPickerProps) => {
-  return (
-    <Textarea
-      id={id}
-      fieldSize={fieldSize}
-      label={label}
-      labelSuffix={labelSuffix}
-      placeholder="Ex: AAAAABbxCy3mLg3hiTqX4VUEEp60pFOrJNxYM1JtxXTwXhY2AAAAZAAAAAMAAAAGAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAJAAAAAAAAAAHwXhY2AAAAQCPAo8QwsZe9FA0sz/deMdhlu6/zrk7SgkBG22ApvtpETBhnGkX4trSFDz8sVlKqvweqGUVgvjUyM0AcHxyXZQw="
-      value={value}
-      error={error}
-      rows={5}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};
+}: XdrPickerProps) => (
+  <Textarea
+    id={id}
+    fieldSize={fieldSize}
+    label={label}
+    labelSuffix={labelSuffix}
+    placeholder="Ex: AAAAABbxCy3mLg3hiTqX4VUEEp60pFOrJNxYM1JtxXTwXhY2AAAAZAAAAAMAAAAGAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAJAAAAAAAAAAHwXhY2AAAAQCPAo8QwsZe9FA0sz/deMdhlu6/zrk7SgkBG22ApvtpETBhnGkX4trSFDz8sVlKqvweqGUVgvjUyM0AcHxyXZQw="
+    value={value}
+    error={error}
+    rows={5}
+    onChange={onChange}
+    {...props}
+  />
+);

src/styles/globals.scss

@@ -328,8 +328,8 @@
 
     &__icon {
       display: block;
-      width: pxToREm(14px);
-      height: pxToREm(14px);
+      width: pxToRem(14px);
+      height: pxToRem(14px);
 
       svg {
         display: block;
@@ -426,3 +426,35 @@
     }
   }
 }
+
+.SignTx {
+  display: flex;
+  flex-direction: column;
+  gap: pxToRem(12px);
+
+  &__xdr {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(16px);
+
+    .Text {
+      display: flex;
+      align-items: center;
+      gap: pxToRem(4px);
+      color: var(--sds-clr-gray-12);
+    }
+  }
+
+  &__icon {
+    display: inline-block;
+    width: pxToRem(14px);
+    height: pxToRem(14px);
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      stroke: var(--sds-clr-gray-08);
+    }
+  }
+}

src/validate/methods/xdr.ts

@@ -1,7 +1,30 @@
-export const xdr = (value: string) => {
+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 false;
+  return true;
+};
+
+export const xdr = (value: string) => {
+  let base64Validation = validateBase64(value);
+  if (!base64Validation) {
+    return base64Validation;
+  }
+
+  try {
+    stellarXDR.TransactionEnvelope.fromXDR(value, "base64");
+    return {
+      result: "success",
+      message: "Valid Transaction Envelope XDR",
+    };
+  } catch (e) {
+    return {
+      result: "error",
+      message: "Unable to parse input XDR into Transaction Envelope",
+      originalError: e,
+    };
+  }
 };