Merge pull request #253 from XRPLF/fix/json-tx

Fix json mode.
2022-07-20 13:59:42 +05:30
parent fdf33b9f45 3179757469
commit 8e49a3f5f1
5 changed files with 136 additions and 87 deletions
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -1,11 +1,14 @@
 import { Play } from "phosphor-react";
-import { FC, useCallback, useEffect, useMemo } from "react";
+import { FC, useCallback, useEffect } from "react";
 import { useSnapshot } from "valtio";
 import state from "../../state";
 import {
+  defaultTransactionType,
+  getTxFields,
  modifyTransaction,
  prepareState,
  prepareTransaction,
+  SelectOption,
  TransactionState,
 } from "../../state/transactions";
 import { sendTransaction } from "../../state/actions";
@@ -15,7 +18,7 @@ import Flex from "../Flex";
 import { TxJson } from "./json";
 import { TxUI } from "./ui";
 import { default as _estimateFee } from "../../utils/estimateFee";
-import toast from 'react-hot-toast';
+import toast from "react-hot-toast";

 export interface TransactionProps {
  header: string;
@@ -34,7 +37,6 @@ const Transaction: FC<TransactionProps> = ({
    txIsDisabled,
    txIsLoading,
    viewType,
-    editorSavedValue,
    editorValue,
  } = txState;

@@ -46,7 +48,7 @@ const Transaction: FC<TransactionProps> = ({
  );

  const prepareOptions = useCallback(
-    (state: TransactionState = txState) => {
+    (state: Partial<TransactionState> = txState) => {
      const {
        selectedTransaction,
        selectedDestAccount,
@@ -55,9 +57,7 @@ const Transaction: FC<TransactionProps> = ({
      } = state;

      const TransactionType = selectedTransaction?.value || null;
-      const Destination =
-        selectedDestAccount?.value ||
-        ("Destination" in txFields ? null : undefined);
+      const Destination = selectedDestAccount?.value || txFields?.Destination;
      const Account = selectedAccount?.value || null;

      return prepareTransaction({
@@ -109,8 +109,9 @@ const Transaction: FC<TransactionProps> = ({
      }
      const options = prepareOptions(st);

-      if (options.Destination === null) {
-        throw Error("Destination account cannot be null");
+      const fields = getTxFields(options.TransactionType);
+      if (fields.Destination && !options.Destination) {
+        throw Error("Destination account is required!");
      }

      await sendTransaction(account, options, { logPrefix });
@@ -136,15 +137,38 @@ const Transaction: FC<TransactionProps> = ({
    prepareOptions,
  ]);

-  const resetState = useCallback(() => {
-    modifyTransaction(header, { viewType }, { replaceState: true });
-  }, [header, viewType]);
+  const getJsonString = useCallback(
+    (state?: Partial<TransactionState>) =>
+      JSON.stringify(
+        prepareOptions?.(state) || {},
+        null,
+        editorSettings.tabSize
+      ),
+    [editorSettings.tabSize, prepareOptions]
+  );

-  const jsonValue = useMemo(
-    () =>
-      editorSavedValue ||
-      JSON.stringify(prepareOptions?.() || {}, null, editorSettings.tabSize),
-    [editorSavedValue, editorSettings.tabSize, prepareOptions]
+  const resetState = useCallback(
+    (transactionType: SelectOption | undefined = defaultTransactionType) => {
+      const fields = getTxFields(transactionType?.value);
+
+      const nwState: Partial<TransactionState> = {
+        viewType,
+        selectedTransaction: transactionType,
+      };
+
+      if (fields.Destination !== undefined) {
+        nwState.selectedDestAccount = null;
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
+      nwState.txFields = fields;
+
+      const state = modifyTransaction(header, nwState, { replaceState: true });
+      const editorValue = getJsonString(state);
+      return setState({ editorValue });
+    },
+    [getJsonString, header, setState, viewType]
  );

  const estimateFee = useCallback(
@@ -156,10 +180,10 @@ const Transaction: FC<TransactionProps> = ({
      );
      if (!account) {
        if (!opts?.silent) {
-          toast.error("Please select account from the list.")
+          toast.error("Please select account from the list.");
        }
-        return
-      };
+        return;
+      }

      ptx.Account = account.address;
      ptx.Sequence = account.sequence;
@@ -176,7 +200,7 @@ const Transaction: FC<TransactionProps> = ({
    <Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
      {viewType === "json" ? (
        <TxJson
-          value={jsonValue}
+          getJsonString={getJsonString}
          header={header}
          state={txState}
          setState={setState}
@@ -199,7 +223,7 @@ const Transaction: FC<TransactionProps> = ({
        <Button
          onClick={() => {
            if (viewType === "ui") {
-              setState({ editorSavedValue: null, viewType: "json" });
+              setState({ viewType: "json" });
            } else setState({ viewType: "ui" });
          }}
          outline
@@ -207,7 +231,7 @@ const Transaction: FC<TransactionProps> = ({
          {viewType === "ui" ? "EDIT AS JSON" : "EXIT JSON MODE"}
        </Button>
        <Flex row>
-          <Button onClick={resetState} outline css={{ mr: "$3" }}>
+          <Button onClick={() => resetState()} outline css={{ mr: "$3" }}>
            RESET
          </Button>
          <Button
--- a/components/Transaction/json.tsx
+++ b/components/Transaction/json.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSnapshot } from "valtio";
 import state, {
  prepareState,
@@ -15,7 +15,7 @@ import Monaco from "../Monaco";
 import type monaco from "monaco-editor";

 interface JsonProps {
-  value?: string;
+  getJsonString?: (state?: Partial<TransactionState>) => string;
  header?: string;
  setState: (pTx?: Partial<TransactionState> | undefined) => void;
  state: TransactionState;
@@ -23,22 +23,23 @@ interface JsonProps {
 }

 export const TxJson: FC<JsonProps> = ({
-  value = "",
+  getJsonString,
  state: txState,
  header,
  setState,
 }) => {
  const { editorSettings, accounts } = useSnapshot(state);
-  const { editorValue = value, estimatedFee } = txState;
-  const [hasUnsaved, setHasUnsaved] = useState(false);
+  const { editorValue, estimatedFee } = txState;
  const [currTxType, setCurrTxType] = useState<string | undefined>(
    txState.selectedTransaction?.value
  );

  useEffect(() => {
-    setState({ editorValue: value });
+    setState({
+      editorValue: getJsonString?.(),
+    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  }, []);

  useEffect(() => {
    const parsed = parseJSON(editorValue);
@@ -52,21 +53,22 @@ export const TxJson: FC<JsonProps> = ({
    }
  }, [editorValue]);

-  useEffect(() => {
-    if (editorValue === value) setHasUnsaved(false);
-    else setHasUnsaved(true);
-  }, [editorValue, value]);
-
  const saveState = (value: string, transactionType?: string) => {
    const tx = prepareState(value, transactionType);
-    if (tx) setState(tx);
+    if (tx) {
+      setState(tx);
+      setState({
+        editorValue: getJsonString?.(tx),
+      });
+    }
  };

  const discardChanges = () => {
    showAlert("Confirm", {
      body: "Are you sure to discard these changes?",
      confirmText: "Yes",
-      onConfirm: () => setState({ editorValue: value }),
+      onCancel: () => {},
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
    });
  };

@@ -79,8 +81,8 @@ export const TxJson: FC<JsonProps> = ({
    showAlert("Error!", {
      body: `Malformed Transaction in ${header}, would you like to discard these changes?`,
      confirmText: "Discard",
-      onConfirm: () => setState({ editorValue: value }),
-      onCancel: () => setState({ viewType: "json", editorSavedValue: value }),
+      onConfirm: () => setState({ editorValue: getJsonString?.() }),
+      onCancel: () => setState({ viewType: "json" }),
    });
  };

@@ -174,6 +176,11 @@ export const TxJson: FC<JsonProps> = ({
    });
  }, [getSchemas, monacoInst]);

+  const hasUnsaved = useMemo(
+    () => editorValue !== getJsonString?.(),
+    [editorValue, getJsonString]
+  );
+
  return (
    <Monaco
      rootProps={{
@@ -203,14 +210,14 @@ export const TxJson: FC<JsonProps> = ({
          <Flex
            row
            align="center"
-            css={{ fontSize: "$xs", color: "$textMuted", ml: 'auto' }}
+            css={{ fontSize: "$xs", color: "$textMuted", ml: "auto" }}
          >
            <Text muted small>
              This file has unsaved changes.
            </Text>
            <Link
              css={{ ml: "$1" }}
-              onClick={() => saveState(editorValue, currTxType)}
+              onClick={() => saveState(editorValue || "", currTxType)}
            >
              save
            </Link>
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import Container from "../Container";
 import Flex from "../Flex";
 import Input from "../Input";
@@ -7,9 +7,10 @@ import Text from "../Text";
 import {
  SelectOption,
  TransactionState,
-  transactionsData,
+  transactionsOptions,
  TxFields,
  getTxFields,
+  defaultTransactionType,
 } from "../../state/transactions";
 import { useSnapshot } from "valtio";
 import state from "../../state";
@@ -38,12 +39,6 @@ export const TxUI: FC<UIProps> = ({
    txFields,
  } = txState;

-
-  const transactionsOptions = transactionsData.map(tx => ({
-    value: tx.TransactionType,
-    label: tx.TransactionType,
-  }));
-
  const accountOptions: SelectOption[] = accounts.map(acc => ({
    label: acc.name,
    value: acc.address,
@@ -58,10 +53,16 @@ export const TxUI: FC<UIProps> = ({

  const [feeLoading, setFeeLoading] = useState(false);

-  const resetOptions = useCallback(
+  const resetFields = useCallback(
    (tt: string) => {
      const fields = getTxFields(tt);
-      if (!fields.Destination) setState({ selectedDestAccount: null });
+
+      if (fields.Destination !== undefined) {
+        setState({ selectedDestAccount: null });
+        fields.Destination = "";
+      } else {
+        fields.Destination = undefined;
+      }
      return setState({ txFields: fields });
    },
    [setState]
@@ -102,33 +103,37 @@ export const TxUI: FC<UIProps> = ({
    (tt: SelectOption) => {
      setState({ selectedTransaction: tt });

-      const newState = resetOptions(tt.value);
+      const newState = resetFields(tt.value);

      handleEstimateFee(newState, true);
    },
-    [handleEstimateFee, resetOptions, setState]
+    [handleEstimateFee, resetFields, setState]
  );

-  const specialFields = ["TransactionType", "Account", "Destination"];
-
-  const otherFields = Object.keys(txFields).filter(
-    k => !specialFields.includes(k)
-  ) as [keyof TxFields];
-
-  const switchToJson = () =>
-    setState({ editorSavedValue: null, viewType: "json" });
+  const switchToJson = () => setState({ viewType: "json" });

  // default tx
  useEffect(() => {
    if (selectedTransaction?.value) return;

-    const defaultOption = transactionsOptions.find(
-      tt => tt.value === "Payment"
-    );
-    if (defaultOption) {
-      handleChangeTxType(defaultOption);
+    if (defaultTransactionType) {
+      handleChangeTxType(defaultTransactionType);
    }
-  }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);
+  }, [handleChangeTxType, selectedTransaction?.value]);
+
+  const fields = useMemo(
+    () => getTxFields(selectedTransaction?.value),
+    [selectedTransaction?.value]
+  );
+
+  const specialFields = ["TransactionType", "Account"];
+  if (fields.Destination !== undefined) {
+    specialFields.push("Destination");
+  }
+
+  const otherFields = Object.keys(txFields).filter(
+    k => !specialFields.includes(k)
+  ) as [keyof TxFields];

  return (
    <Container
@@ -185,7 +190,7 @@ export const TxUI: FC<UIProps> = ({
            onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
          />
        </Flex>
-        {txFields.Destination !== undefined && (
+        {fields.Destination !== undefined && (
          <Flex
            row
            fluid
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -55,7 +55,8 @@
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
    "TransactionType": "EscrowCancel",
    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
-    "OfferSequence": 7
+    "OfferSequence": 7,
+    "Fee": "10"
  },
  {
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -69,7 +70,8 @@
    "FinishAfter": 533171558,
    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
    "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
  },
  {
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -77,7 +79,8 @@
    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
    "OfferSequence": 7,
    "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
-    "Fulfillment": "A0028000"
+    "Fulfillment": "A0028000",
+    "Fee": "10"
  },
  {
    "TransactionType": "NFTokenMint",
@@ -117,7 +120,9 @@
      "$value": "100",
      "$type": "xrp"
    },
-    "Flags": 1
+    "Flags": 1,
+    "Destination": "",
+    "Fee": "10"
  },
  {
    "TransactionType": "OfferCancel",
@@ -165,7 +170,8 @@
    "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
    "CancelAfter": 533171558,
    "DestinationTag": 23480,
-    "SourceTag": 11747
+    "SourceTag": 11747,
+    "Fee": "10"
  },
  {
    "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
@@ -175,7 +181,8 @@
      "$value": "200",
      "$type": "xrp"
    },
-    "Expiration": 543171558
+    "Expiration": 543171558,
+    "Fee": "10"
  },
  {
    "Flags": 0,
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -18,14 +18,13 @@ export interface TransactionState {
    txIsDisabled: boolean;
    txFields: TxFields;
    viewType: 'json' | 'ui',
-    editorSavedValue: null | string,
    editorValue?: string,
    estimatedFee?: string
 }


 export type TxFields = Omit<
-    typeof transactionsData[0],
+    Partial<typeof transactionsData[0]>,
    "Account" | "Sequence" | "TransactionType"
 >;

@@ -36,15 +35,14 @@ export const defaultTransaction: TransactionState = {
    txIsLoading: false,
    txIsDisabled: false,
    txFields: {},
-    viewType: 'ui',
-    editorSavedValue: null
+    viewType: 'ui'
 };

 export const transactionsState = proxy({
    transactions: [
        {
            header: "test1.json",
-            state: defaultTransaction,
+            state: { ...defaultTransaction },
        },
    ],
    activeHeader: "test1.json"
@@ -92,7 +90,7 @@ export const modifyTransaction = (
    }

    Object.keys(partialTx).forEach(k => {
-        // Typescript mess here, but is definetly safe!
+        // Typescript mess here, but is definitely safe!
        const s = tx.state as any;
        const p = partialTx as any; // ? Make copy
        if (!deepEqual(s[k], p[k])) s[k] = p[k];
@@ -132,7 +130,7 @@ export const prepareTransaction = (data: any) => {
        }

        // delete unnecessary fields
-        if (options[field] === undefined) {
+        if (!options[field]) {
            delete options[field];
        }
    });
@@ -152,7 +150,7 @@ export const prepareState = (value: string, transactionType?: string) => {

    const { Account, TransactionType, Destination, ...rest } = options;
    let tx: Partial<TransactionState> = {};
-    const txFields = getTxFields(transactionType)
+    const schema = getTxFields(transactionType)

    if (Account) {
        const acc = state.accounts.find(acc => acc.address === Account);
@@ -180,9 +178,8 @@ export const prepareState = (value: string, transactionType?: string) => {
        tx.selectedTransaction = null;
    }

-    if (txFields.Destination !== undefined) {
+    if (schema.Destination !== undefined) {
        const dest = state.accounts.find(acc => acc.address === Destination);
-        rest.Destination = null
        if (dest) {
            tx.selectedDestAccount = {
                label: dest.name,
@@ -199,11 +196,14 @@ export const prepareState = (value: string, transactionType?: string) => {
            tx.selectedDestAccount = null
        }
    }
+    else if (Destination) {
+        rest.Destination = Destination
+    }

    Object.keys(rest).forEach(field => {
        const value = rest[field];
-        const origValue = txFields[field as keyof TxFields]
-        const isXrp = typeof value !== 'object' && origValue && typeof origValue === 'object' && origValue.$type === 'xrp'
+        const schemaVal = schema[field as keyof TxFields]
+        const isXrp = typeof value !== 'object' && schemaVal && typeof schemaVal === 'object' && schemaVal.$type === 'xrp'
        if (isXrp) {
            rest[field] = {
                $type: "xrp",
@@ -218,7 +218,6 @@ export const prepareState = (value: string, transactionType?: string) => {
    });

    tx.txFields = rest;
-    tx.editorSavedValue = null;

    return tx
 }
@@ -244,3 +243,10 @@ export const getTxFields = (tt?: string) => {
 }

 export { transactionsData }
+
+export const transactionsOptions = transactionsData.map(tx => ({
+    value: tx.TransactionType,
+    label: tx.TransactionType,
+}));
+
+export const defaultTransactionType = transactionsOptions.find(tt => tt.value === 'Payment')