support object Amount

2022-05-04 16:57:32 +05:30
parent d8bf10d0b8
commit 386619619b
5 changed files with 29 additions and 67 deletions
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -82,7 +82,7 @@ const Transaction: FC<TransactionProps> = ({
    let st: TransactionState | undefined;
    if (viewType === "json") {
      // save the editor state first
-      const pst = prepareState(editorValue);
+      const pst = prepareState(editorValue || '', txState);
      if (!pst) return;

      st = setState(pst);
@@ -116,16 +116,7 @@ const Transaction: FC<TransactionProps> = ({
      }
    }
    setState({ txIsLoading: false });
-  }, [
-    viewType,
-    editorValue,
-    accounts,
-    txIsDisabled,
-    setState,
-    selectedAccount?.value,
-    prepareOptions,
-    header,
-  ]);
+  }, [viewType, accounts, txIsDisabled, setState, header, editorValue, txState, selectedAccount?.value, prepareOptions]);

  const resetState = useCallback(() => {
    modifyTransaction(header, { viewType }, { replaceState: true });
--- a/components/Transaction/json.tsx
+++ b/components/Transaction/json.tsx
@@ -45,8 +45,8 @@ export const TxJson: FC<JsonProps> = ({
    else setHasUnsaved(true);
  }, [editorValue, value]);

-  const saveState = (value: string) => {
-    const tx = prepareState(value);
+  const saveState = (value: string, txState: TransactionState) => {
+    const tx = prepareState(value, txState);
    if (tx) setState(tx);
  };

@@ -61,7 +61,7 @@ export const TxJson: FC<JsonProps> = ({
  const onExit = (value: string) => {
    const options = parseJSON(value);
    if (options) {
-      saveState(value);
+      saveState(value, txState);
      return;
    }
    showAlert("Error!", {
@@ -106,7 +106,7 @@ export const TxJson: FC<JsonProps> = ({
      {hasUnsaved && (
        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
          This file has unsaved changes.{" "}
-          <Link onClick={() => saveState(editorValue)}>save</Link>{" "}
+          <Link onClick={() => saveState(editorValue, txState)}>save</Link>{" "}
          <Link onClick={discardChanges}>discard</Link>
        </Text>
      )}
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -9,7 +9,6 @@ import {
  TransactionState,
  transactionsData,
  TxFields,
-  OtherFields,
 } from "../../state/transactions";
 import { useSnapshot } from "valtio";
 import state from "../../state";
@@ -74,11 +73,11 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
    resetOptions(tt.value);
  };

-  const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
+  const specialFields = ["TransactionType", "Account", "Destination"];

  const otherFields = Object.keys(txFields).filter(
-    k => !usualFields.includes(k)
-  ) as OtherFields;
+    k => !specialFields.includes(k)
+  ) as [keyof TxFields];

  return (
    <Container
@@ -135,34 +134,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
            onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
          />
        </Flex>
-        {txFields.Amount !== undefined && (
-          <Flex
-            row
-            fluid
-            css={{
-              justifyContent: "flex-end",
-              alignItems: "center",
-              mb: "$3",
-              pr: "1px",
-            }}
-          >
-            <Text muted css={{ mr: "$3" }}>
-              Amount (XRP):{" "}
-            </Text>
-            <Input
-              value={txFields.Amount.value}
-              onChange={e =>
-                setState({
-                  txFields: {
-                    ...txFields,
-                    Amount: { type: "currency", value: e.target.value },
-                  },
-                })
-              }
-              css={{ width: "70%", flex: "inherit" }}
-            />
-          </Flex>
-        )}
        {txFields.Destination !== undefined && (
          <Flex
            row
@@ -202,8 +173,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
            value = _value?.toString();
          }

-          let isCurrency =
-            typeof _value === "object" && _value.type === "currency";
+          let isXrp = typeof _value === "object" && _value.type === "xrp";
          return (
            <Flex
              key={field}
@@ -217,7 +187,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
              }}
            >
              <Text muted css={{ mr: "$3" }}>
-                {field + (isCurrency ? " (XRP)" : "")}:{" "}
+                {field + (isXrp ? " (XRP)" : "")}:{" "}
              </Text>
              <Input
                value={value}
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -28,7 +28,7 @@
    "TransactionType": "CheckCash",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
    "Fee": "12"
@@ -62,7 +62,7 @@
    "TransactionType": "EscrowCreate",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
    "CancelAfter": 533257958,
@@ -100,7 +100,7 @@
    "TokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "Flags": 1
  },
@@ -123,7 +123,7 @@
    "TakerGets": "6000000",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    }
  },
  {
@@ -132,7 +132,7 @@
    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "Fee": "12",
    "Flags": 2147483648,
@@ -143,7 +143,7 @@
    "TransactionType": "PaymentChannelCreate",
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
    "SettleDelay": 86400,
@@ -158,7 +158,7 @@
    "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
    "Amount": {
      "value": "200",
-      "type": "currency"
+      "type": "xrp"
    },
    "Expiration": 543171558
  },
@@ -214,7 +214,7 @@
    "LastLedgerSequence": 8007750,
    "Amount": {
      "value": "100",
-      "type": "currency"
+      "type": "xrp"
    },
    "Sequence": 12
  }
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -27,8 +27,6 @@ export type TxFields = Omit<
    "Account" | "Sequence" | "TransactionType"
 >;

-export type OtherFields = (keyof Omit<TxFields, "Destination">)[];
-
 export const defaultTransaction: TransactionState = {
    selectedTransaction: null,
    selectedAccount: null,
@@ -107,8 +105,8 @@ export const prepareTransaction = (data: any) => {

    (Object.keys(options)).forEach(field => {
        let _value = options[field];
-        // convert currency
-        if (_value && typeof _value === "object" && _value.type === "currency") {
+        // convert xrp
+        if (_value && typeof _value === "object" && _value.type === "xrp") {
            if (+_value.value) {
                options[field] = (+_value.value * 1000000 + "") as any;
            } else {
@@ -141,7 +139,7 @@ export const prepareTransaction = (data: any) => {
 }

 // editor value to state
-export const prepareState = (value?: string) => {
+export const prepareState = (value: string, txState: TransactionState) => {
    const options = parseJSON(value);
    if (!options) {
        showAlert("Error!", {
@@ -152,6 +150,7 @@ export const prepareState = (value?: string) => {

    const { Account, TransactionType, Destination, ...rest } = options;
    let tx: Partial<TransactionState> = {};
+    const { txFields } = txState

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

-    if (Destination !== undefined) {
+    if (txFields.Destination !== undefined) {
        const dest = state.accounts.find(acc => acc.address === Destination);
        rest.Destination = null
        if (dest) {
@@ -201,10 +200,12 @@ export const prepareState = (value?: string) => {

    Object.keys(rest).forEach(field => {
        const value = rest[field];
-        if (field === "Amount") {
+        const origValue = txFields[field as keyof TxFields]
+        const isXrp = typeof value !== 'object' && origValue && typeof origValue === 'object' && origValue.type === 'xrp'
+        if (isXrp) {
            rest[field] = {
-                type: "currency",
-                value: +value / 1000000, // TODO handle object currencies
+                type: "xrp",
+                value: +value / 1000000, // TODO maybe use bigint?
            };
        } else if (typeof value === "object") {
            rest[field] = {