From 386619619b6b762e31b02ee4646a3f41284ef7f0 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Wed, 4 May 2022 16:57:32 +0530
Subject: [PATCH] support object `Amount`

---
 components/Transaction/index.tsx | 13 ++---------
 components/Transaction/json.tsx  |  8 +++----
 components/Transaction/ui.tsx    | 40 ++++----------------------------
 content/transactions.json        | 16 ++++++-------
 state/transactions.ts            | 19 ++++++++-------
 5 files changed, 29 insertions(+), 67 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index a1d9b63..558bad3 100644
--- 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 });
diff --git a/components/Transaction/json.tsx b/components/Transaction/json.tsx
index 5460613..acccff8 100644
--- 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>
       )}
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 7dd5241..b933a03 100644
--- 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}
diff --git a/content/transactions.json b/content/transactions.json
index a09f2ea..1fb2cb3 100644
--- 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
   }
diff --git a/state/transactions.ts b/state/transactions.ts
index 301808a..f744ef9 100644
--- 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] = {