Persisted transaction tabs state
This commit is contained in:
muzam1l
@@ -29,7 +29,7 @@ interface TabProps {
|
|||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO customise strings shown
|
// TODO customise messages shown
|
||||||
interface Props {
|
interface Props {
|
||||||
activeIndex?: number;
|
activeIndex?: number;
|
||||||
activeHeader?: string;
|
activeHeader?: string;
|
||||||
@@ -107,7 +107,7 @@ export const Tabs = ({
|
|||||||
setActive(tabs.length);
|
setActive(tabs.length);
|
||||||
|
|
||||||
onCreateNewTab?.(_tabname);
|
onCreateNewTab?.(_tabname);
|
||||||
}, [tabname, defaultExtension, validateTabname, onCreateNewTab, tabs.length]);
|
}, [tabname, defaultExtension, forceDefaultExtension, validateTabname, tabs.length, onCreateNewTab]);
|
||||||
|
|
||||||
const handleCloseTab = useCallback(
|
const handleCloseTab = useCallback(
|
||||||
(idx: number) => {
|
(idx: number) => {
|
||||||
|
|||||||
372
components/Transaction.tsx
Normal file
372
components/Transaction.tsx
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
import { Play } from "phosphor-react";
|
||||||
|
import { FC, useCallback, useEffect } from "react";
|
||||||
|
import { useSnapshot } from "valtio";
|
||||||
|
import transactionsData from "../content/transactions.json";
|
||||||
|
import state from "../state";
|
||||||
|
import { sendTransaction } from "../state/actions";
|
||||||
|
import Box from "./Box";
|
||||||
|
import Button from "./Button";
|
||||||
|
import Container from "./Container";
|
||||||
|
import { streamState } from "./DebugStream";
|
||||||
|
import Flex from "./Flex";
|
||||||
|
import Input from "./Input";
|
||||||
|
import Text from "./Text";
|
||||||
|
import Select from "./Select";
|
||||||
|
|
||||||
|
type TxFields = Omit<
|
||||||
|
typeof transactionsData[0],
|
||||||
|
"Account" | "Sequence" | "TransactionType"
|
||||||
|
>;
|
||||||
|
|
||||||
|
type OtherFields = (keyof Omit<TxFields, "Destination">)[];
|
||||||
|
|
||||||
|
type SelectOption = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface TransactionState {
|
||||||
|
selectedTransaction: SelectOption | null;
|
||||||
|
selectedAccount: SelectOption | null;
|
||||||
|
selectedDestAccount: SelectOption | null;
|
||||||
|
txIsLoading: boolean;
|
||||||
|
txIsDisabled: boolean;
|
||||||
|
txFields: TxFields;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TransactionProps {
|
||||||
|
header?: string;
|
||||||
|
state: TransactionState;
|
||||||
|
setState: (p?: Partial<TransactionState>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Transaction: FC<TransactionProps> = ({
|
||||||
|
header,
|
||||||
|
state: {
|
||||||
|
selectedAccount,
|
||||||
|
selectedDestAccount,
|
||||||
|
selectedTransaction,
|
||||||
|
txFields,
|
||||||
|
txIsDisabled,
|
||||||
|
txIsLoading,
|
||||||
|
},
|
||||||
|
setState,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const { accounts } = useSnapshot(state);
|
||||||
|
console.log("Transaction");
|
||||||
|
|
||||||
|
const transactionsOptions = transactionsData.map(tx => ({
|
||||||
|
value: tx.TransactionType,
|
||||||
|
label: tx.TransactionType,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const accountOptions: SelectOption[] = accounts.map(acc => ({
|
||||||
|
label: acc.name,
|
||||||
|
value: acc.address,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const destAccountOptions: SelectOption[] = accounts
|
||||||
|
.map(acc => ({
|
||||||
|
label: acc.name,
|
||||||
|
value: acc.address,
|
||||||
|
}))
|
||||||
|
.filter(acc => acc.value !== selectedAccount?.value);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const transactionType = selectedTransaction?.value;
|
||||||
|
const account = accounts.find(
|
||||||
|
acc => acc.address === selectedAccount?.value
|
||||||
|
);
|
||||||
|
if (!account || !transactionType || txIsLoading) {
|
||||||
|
setState({ txIsDisabled: true });
|
||||||
|
} else {
|
||||||
|
setState({ txIsDisabled: false });
|
||||||
|
}
|
||||||
|
}, [txIsLoading, selectedTransaction, selectedAccount, accounts, setState]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let _txFields: TxFields | undefined = transactionsData.find(
|
||||||
|
tx => tx.TransactionType === selectedTransaction?.value
|
||||||
|
);
|
||||||
|
if (!_txFields) return setState({ txFields: {} });
|
||||||
|
_txFields = { ..._txFields } as TxFields;
|
||||||
|
|
||||||
|
if (!_txFields.Destination) setState({ selectedDestAccount: null })
|
||||||
|
// @ts-ignore
|
||||||
|
delete _txFields.TransactionType;
|
||||||
|
// @ts-ignore
|
||||||
|
delete _txFields.Account;
|
||||||
|
// @ts-ignore
|
||||||
|
delete _txFields.Sequence;
|
||||||
|
setState({ txFields: _txFields });
|
||||||
|
}, [setState, selectedTransaction]);
|
||||||
|
|
||||||
|
const submitTest = useCallback(async () => {
|
||||||
|
const account = accounts.find(
|
||||||
|
acc => acc.address === selectedAccount?.value
|
||||||
|
);
|
||||||
|
const TransactionType = selectedTransaction?.value;
|
||||||
|
if (!account || !TransactionType || txIsDisabled) return;
|
||||||
|
|
||||||
|
setState({ txIsLoading: true });
|
||||||
|
// setTxIsError(null)
|
||||||
|
try {
|
||||||
|
let options = { ...txFields };
|
||||||
|
|
||||||
|
options.Destination = selectedDestAccount?.value;
|
||||||
|
(Object.keys(options) as (keyof TxFields)[]).forEach(field => {
|
||||||
|
let _value = options[field];
|
||||||
|
// convert currency
|
||||||
|
if (typeof _value === "object" && _value.type === "currency") {
|
||||||
|
if (+_value.value) {
|
||||||
|
options[field] = (+_value.value * 1000000 + "") as any;
|
||||||
|
} else {
|
||||||
|
options[field] = undefined; // 👇 💀
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// handle type: `json`
|
||||||
|
if (typeof _value === "object" && _value.type === "json") {
|
||||||
|
if (typeof _value.value === "object") {
|
||||||
|
options[field] = _value.value as any;
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
options[field] = JSON.parse(_value.value);
|
||||||
|
} catch (error) {
|
||||||
|
const message = `Input error for json field '${field}': ${
|
||||||
|
error instanceof Error ? error.message : ""
|
||||||
|
}`;
|
||||||
|
throw Error(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete unneccesary fields
|
||||||
|
if (!options[field]) {
|
||||||
|
delete options[field];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
|
||||||
|
await sendTransaction(
|
||||||
|
account,
|
||||||
|
{
|
||||||
|
TransactionType,
|
||||||
|
...options,
|
||||||
|
},
|
||||||
|
{ logPrefix }
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
if (error instanceof Error) {
|
||||||
|
state.transactionLogs.push({ type: "error", message: error.message });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setState({ txIsLoading: false });
|
||||||
|
}, [
|
||||||
|
header,
|
||||||
|
setState,
|
||||||
|
selectedAccount?.value,
|
||||||
|
selectedDestAccount?.value,
|
||||||
|
selectedTransaction?.value,
|
||||||
|
accounts,
|
||||||
|
txFields,
|
||||||
|
txIsDisabled,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const resetState = useCallback(() => {
|
||||||
|
setState({});
|
||||||
|
}, [setState]);
|
||||||
|
|
||||||
|
const handleSetAccount = (acc: SelectOption) => {
|
||||||
|
setState({ selectedAccount: acc });
|
||||||
|
streamState.selectedAccount = acc;
|
||||||
|
};
|
||||||
|
|
||||||
|
const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
|
||||||
|
const otherFields = Object.keys(txFields).filter(
|
||||||
|
k => !usualFields.includes(k)
|
||||||
|
) as OtherFields;
|
||||||
|
return (
|
||||||
|
<Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
|
||||||
|
<Container
|
||||||
|
css={{
|
||||||
|
p: "$3 01",
|
||||||
|
fontSize: "$sm",
|
||||||
|
height: "calc(100% - 45px)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
|
||||||
|
<Flex
|
||||||
|
row
|
||||||
|
fluid
|
||||||
|
css={{
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
mb: "$3",
|
||||||
|
mt: "1px",
|
||||||
|
pr: "1px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text muted css={{ mr: "$3" }}>
|
||||||
|
Transaction type:{" "}
|
||||||
|
</Text>
|
||||||
|
<Select
|
||||||
|
instanceId="transactionsType"
|
||||||
|
placeholder="Select transaction type"
|
||||||
|
options={transactionsOptions}
|
||||||
|
hideSelectedOptions
|
||||||
|
css={{ width: "70%" }}
|
||||||
|
value={selectedTransaction}
|
||||||
|
onChange={(tx: any) => setState({ selectedTransaction: tx })}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
<Flex
|
||||||
|
row
|
||||||
|
fluid
|
||||||
|
css={{
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
mb: "$3",
|
||||||
|
pr: "1px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text muted css={{ mr: "$3" }}>
|
||||||
|
Account:{" "}
|
||||||
|
</Text>
|
||||||
|
<Select
|
||||||
|
instanceId="from-account"
|
||||||
|
placeholder="Select your account"
|
||||||
|
css={{ width: "70%" }}
|
||||||
|
options={accountOptions}
|
||||||
|
value={selectedAccount}
|
||||||
|
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", height: "$9" }}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
{txFields.Destination !== undefined && (
|
||||||
|
<Flex
|
||||||
|
row
|
||||||
|
fluid
|
||||||
|
css={{
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
mb: "$3",
|
||||||
|
pr: "1px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text muted css={{ mr: "$3" }}>
|
||||||
|
Destination account:{" "}
|
||||||
|
</Text>
|
||||||
|
<Select
|
||||||
|
instanceId="to-account"
|
||||||
|
placeholder="Select the destination account"
|
||||||
|
css={{ width: "70%" }}
|
||||||
|
options={destAccountOptions}
|
||||||
|
value={selectedDestAccount}
|
||||||
|
isClearable
|
||||||
|
onChange={(acc: any) => setState({ selectedDestAccount: acc })}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
{otherFields.map(field => {
|
||||||
|
let _value = txFields[field];
|
||||||
|
let value = typeof _value === "object" ? _value.value : _value;
|
||||||
|
value =
|
||||||
|
typeof value === "object"
|
||||||
|
? JSON.stringify(value)
|
||||||
|
: value?.toLocaleString();
|
||||||
|
let isCurrency =
|
||||||
|
typeof _value === "object" && _value.type === "currency";
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
key={field}
|
||||||
|
row
|
||||||
|
fluid
|
||||||
|
css={{
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
alignItems: "center",
|
||||||
|
mb: "$3",
|
||||||
|
pr: "1px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text muted css={{ mr: "$3" }}>
|
||||||
|
{field + (isCurrency ? " (XRP)" : "")}:{" "}
|
||||||
|
</Text>
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={e =>
|
||||||
|
setState({
|
||||||
|
txFields: {
|
||||||
|
...txFields,
|
||||||
|
[field]:
|
||||||
|
typeof _value === "object"
|
||||||
|
? { ..._value, value: e.target.value }
|
||||||
|
: e.target.value,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
css={{ width: "70%", flex: "inherit", height: "$9" }}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
</Container>
|
||||||
|
<Flex
|
||||||
|
row
|
||||||
|
css={{
|
||||||
|
justifyContent: "space-between",
|
||||||
|
position: "absolute",
|
||||||
|
left: 0,
|
||||||
|
bottom: 0,
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button outline>VIEW AS JSON</Button>
|
||||||
|
<Flex row>
|
||||||
|
<Button onClick={resetState} outline css={{ mr: "$3" }}>
|
||||||
|
RESET
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
onClick={submitTest}
|
||||||
|
isLoading={txIsLoading}
|
||||||
|
disabled={txIsDisabled}
|
||||||
|
>
|
||||||
|
<Play weight="bold" size="16px" />
|
||||||
|
RUN TEST
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Transaction;
|
||||||
@@ -1,24 +1,11 @@
|
|||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { Play } from "phosphor-react";
|
|
||||||
import { FC, useCallback, useEffect, useState } from "react";
|
|
||||||
import Split from "react-split";
|
import Split from "react-split";
|
||||||
import { useSnapshot } from "valtio";
|
import { proxy, useSnapshot } from "valtio";
|
||||||
import {
|
import { Box, Container, Flex, Tab, Tabs } from "../../components";
|
||||||
Box,
|
import Transaction, { TransactionState } from "../../components/Transaction";
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
Flex,
|
|
||||||
Input,
|
|
||||||
Select,
|
|
||||||
Tab,
|
|
||||||
Tabs,
|
|
||||||
Text,
|
|
||||||
} from "../../components";
|
|
||||||
import transactionsData from "../../content/transactions.json";
|
|
||||||
import state from "../../state";
|
import state from "../../state";
|
||||||
import { sendTransaction } from "../../state/actions";
|
|
||||||
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
|
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
|
||||||
import { streamState } from "../../components/DebugStream";
|
import { deepEqual } from "../../utils/object";
|
||||||
|
|
||||||
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
|
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@@ -31,355 +18,65 @@ const Accounts = dynamic(() => import("../../components/Accounts"), {
|
|||||||
ssr: false,
|
ssr: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
// type SelectOption<T> = { value: T, label: string };
|
const defaultTransaction: TransactionState = {
|
||||||
type TxFields = Omit<
|
selectedTransaction: null,
|
||||||
typeof transactionsData[0],
|
selectedAccount: null,
|
||||||
"Account" | "Sequence" | "TransactionType"
|
selectedDestAccount: null,
|
||||||
>;
|
txIsLoading: false,
|
||||||
type OtherFields = (keyof Omit<TxFields, "Destination">)[];
|
txIsDisabled: false,
|
||||||
|
txFields: {},
|
||||||
|
};
|
||||||
|
|
||||||
interface AccountOption {
|
const testState = proxy({
|
||||||
label: string;
|
transactions: [
|
||||||
value: string;
|
{
|
||||||
}
|
header: "test1.json",
|
||||||
|
state: defaultTransaction,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
interface Props {
|
/**
|
||||||
header?: string;
|
* Simple transaction state changer
|
||||||
}
|
* @param header Unique key and tab name for the transaction tab
|
||||||
|
* @param partialTx partial transaction state, `{}` resets the state and `undefined` deletes the transaction
|
||||||
|
*/
|
||||||
|
const modifyTransaction = (
|
||||||
|
header: string,
|
||||||
|
partialTx?: Partial<TransactionState>
|
||||||
|
) => {
|
||||||
|
const tx = testState.transactions.find(tx => tx.header === header);
|
||||||
|
|
||||||
const Transaction: FC<Props> = ({ header, ...props }) => {
|
if (partialTx === undefined) {
|
||||||
const snap = useSnapshot(state);
|
testState.transactions = testState.transactions.filter(
|
||||||
|
tx => tx.header !== header
|
||||||
const transactionsOptions = transactionsData.map(tx => ({
|
|
||||||
value: tx.TransactionType,
|
|
||||||
label: tx.TransactionType,
|
|
||||||
}));
|
|
||||||
const [selectedTransaction, setSelectedTransaction] = useState<
|
|
||||||
typeof transactionsOptions[0] | null
|
|
||||||
>(null);
|
|
||||||
|
|
||||||
const accountOptions: AccountOption[] = snap.accounts.map(acc => ({
|
|
||||||
label: acc.name,
|
|
||||||
value: acc.address,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const [selectedAccount, setSelectedAccount] = useState<AccountOption | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
|
|
||||||
const destAccountOptions: AccountOption[] = snap.accounts
|
|
||||||
.map(acc => ({
|
|
||||||
label: acc.name,
|
|
||||||
value: acc.address,
|
|
||||||
}))
|
|
||||||
.filter(acc => acc.value !== selectedAccount?.value);
|
|
||||||
|
|
||||||
const [selectedDestAccount, setSelectedDestAccount] =
|
|
||||||
useState<AccountOption | null>(null);
|
|
||||||
|
|
||||||
const [txIsLoading, setTxIsLoading] = useState(false);
|
|
||||||
const [txIsDisabled, setTxIsDisabled] = useState(false);
|
|
||||||
const [txFields, setTxFields] = useState<TxFields>({});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const transactionType = selectedTransaction?.value;
|
|
||||||
const account = snap.accounts.find(
|
|
||||||
acc => acc.address === selectedAccount?.value
|
|
||||||
);
|
);
|
||||||
if (!account || !transactionType || txIsLoading) {
|
return;
|
||||||
setTxIsDisabled(true);
|
}
|
||||||
} else {
|
|
||||||
setTxIsDisabled(false);
|
|
||||||
}
|
|
||||||
}, [txIsLoading, selectedTransaction, selectedAccount, snap.accounts]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
if (!tx) {
|
||||||
let _txFields: TxFields | undefined = transactionsData.find(
|
testState.transactions.push({
|
||||||
tx => tx.TransactionType === selectedTransaction?.value
|
header,
|
||||||
);
|
state: {
|
||||||
if (!_txFields) return setTxFields({});
|
...defaultTransaction,
|
||||||
_txFields = { ..._txFields } as TxFields;
|
...partialTx,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setSelectedDestAccount(null);
|
Object.keys(partialTx).forEach(k => {
|
||||||
// @ts-ignore
|
// Typescript mess here, but is definetly safe!
|
||||||
delete _txFields.TransactionType;
|
const s = tx.state as any;
|
||||||
// @ts-ignore
|
const p = partialTx as any;
|
||||||
delete _txFields.Account;
|
if (!deepEqual(s[k], p[k])) s[k] = p[k];
|
||||||
// @ts-ignore
|
});
|
||||||
delete _txFields.Sequence;
|
|
||||||
setTxFields(_txFields);
|
|
||||||
}, [selectedTransaction, setSelectedDestAccount]);
|
|
||||||
|
|
||||||
const submitTest = useCallback(async () => {
|
|
||||||
const account = snap.accounts.find(
|
|
||||||
acc => acc.address === selectedAccount?.value
|
|
||||||
);
|
|
||||||
const TransactionType = selectedTransaction?.value;
|
|
||||||
if (!account || !TransactionType || txIsDisabled) return;
|
|
||||||
|
|
||||||
setTxIsLoading(true);
|
|
||||||
// setTxIsError(null)
|
|
||||||
try {
|
|
||||||
let options = { ...txFields };
|
|
||||||
|
|
||||||
options.Destination = selectedDestAccount?.value;
|
|
||||||
(Object.keys(options) as (keyof TxFields)[]).forEach(field => {
|
|
||||||
let _value = options[field];
|
|
||||||
// convert currency
|
|
||||||
if (typeof _value === "object" && _value.type === "currency") {
|
|
||||||
if (+_value.value) {
|
|
||||||
options[field] = (+_value.value * 1000000 + "") as any;
|
|
||||||
} else {
|
|
||||||
options[field] = undefined; // 👇 💀
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// handle type: `json`
|
|
||||||
if (typeof _value === "object" && _value.type === "json") {
|
|
||||||
if (typeof _value.value === "object") {
|
|
||||||
options[field] = _value.value as any;
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
options[field] = JSON.parse(_value.value);
|
|
||||||
} catch (error) {
|
|
||||||
const message = `Input error for json field '${field}': ${
|
|
||||||
error instanceof Error ? error.message : ""
|
|
||||||
}`;
|
|
||||||
throw Error(message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// delete unneccesary fields
|
|
||||||
if (!options[field]) {
|
|
||||||
delete options[field];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const logPrefix = header ? `${header.split(".")[0]}: ` : undefined;
|
|
||||||
await sendTransaction(
|
|
||||||
account,
|
|
||||||
{
|
|
||||||
TransactionType,
|
|
||||||
...options,
|
|
||||||
},
|
|
||||||
{ logPrefix }
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
if (error instanceof Error) {
|
|
||||||
state.transactionLogs.push({ type: "error", message: error.message });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTxIsLoading(false);
|
|
||||||
}, [
|
|
||||||
header,
|
|
||||||
selectedAccount?.value,
|
|
||||||
selectedDestAccount?.value,
|
|
||||||
selectedTransaction?.value,
|
|
||||||
snap.accounts,
|
|
||||||
txFields,
|
|
||||||
txIsDisabled,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const resetState = useCallback(() => {
|
|
||||||
setSelectedAccount(null);
|
|
||||||
setSelectedDestAccount(null);
|
|
||||||
setSelectedTransaction(null);
|
|
||||||
setTxFields({});
|
|
||||||
setTxIsDisabled(false);
|
|
||||||
setTxIsLoading(false);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSetAccount = (acc: AccountOption) => {
|
|
||||||
setSelectedAccount(acc);
|
|
||||||
streamState.selectedAccount = acc;
|
|
||||||
};
|
|
||||||
|
|
||||||
const usualFields = ["TransactionType", "Amount", "Account", "Destination"];
|
|
||||||
const otherFields = Object.keys(txFields).filter(
|
|
||||||
k => !usualFields.includes(k)
|
|
||||||
) as OtherFields;
|
|
||||||
return (
|
|
||||||
<Box css={{ position: "relative", height: "calc(100% - 28px)" }} {...props}>
|
|
||||||
<Container
|
|
||||||
css={{
|
|
||||||
p: "$3 01",
|
|
||||||
fontSize: "$sm",
|
|
||||||
height: "calc(100% - 45px)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex column fluid css={{ height: "100%", overflowY: "auto" }}>
|
|
||||||
<Flex
|
|
||||||
row
|
|
||||||
fluid
|
|
||||||
css={{
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
alignItems: "center",
|
|
||||||
mb: "$3",
|
|
||||||
mt: "1px",
|
|
||||||
pr: "1px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text muted css={{ mr: "$3" }}>
|
|
||||||
Transaction type:{" "}
|
|
||||||
</Text>
|
|
||||||
<Select
|
|
||||||
instanceId="transactionsType"
|
|
||||||
placeholder="Select transaction type"
|
|
||||||
options={transactionsOptions}
|
|
||||||
hideSelectedOptions
|
|
||||||
css={{ width: "70%" }}
|
|
||||||
value={selectedTransaction}
|
|
||||||
onChange={(tt: any) => setSelectedTransaction(tt)}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
<Flex
|
|
||||||
row
|
|
||||||
fluid
|
|
||||||
css={{
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
alignItems: "center",
|
|
||||||
mb: "$3",
|
|
||||||
pr: "1px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text muted css={{ mr: "$3" }}>
|
|
||||||
Account:{" "}
|
|
||||||
</Text>
|
|
||||||
<Select
|
|
||||||
instanceId="from-account"
|
|
||||||
placeholder="Select your account"
|
|
||||||
css={{ width: "70%" }}
|
|
||||||
options={accountOptions}
|
|
||||||
value={selectedAccount}
|
|
||||||
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 =>
|
|
||||||
setTxFields({
|
|
||||||
...txFields,
|
|
||||||
Amount: { type: "currency", value: e.target.value },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
css={{ width: "70%", flex: "inherit", height: "$9" }}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
{txFields.Destination !== undefined && (
|
|
||||||
<Flex
|
|
||||||
row
|
|
||||||
fluid
|
|
||||||
css={{
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
alignItems: "center",
|
|
||||||
mb: "$3",
|
|
||||||
pr: "1px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text muted css={{ mr: "$3" }}>
|
|
||||||
Destination account:{" "}
|
|
||||||
</Text>
|
|
||||||
<Select
|
|
||||||
instanceId="to-account"
|
|
||||||
placeholder="Select the destination account"
|
|
||||||
css={{ width: "70%" }}
|
|
||||||
options={destAccountOptions}
|
|
||||||
value={selectedDestAccount}
|
|
||||||
isClearable
|
|
||||||
onChange={(acc: any) => setSelectedDestAccount(acc)}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
{otherFields.map(field => {
|
|
||||||
let _value = txFields[field];
|
|
||||||
let value = typeof _value === "object" ? _value.value : _value;
|
|
||||||
value =
|
|
||||||
typeof value === "object"
|
|
||||||
? JSON.stringify(value)
|
|
||||||
: value?.toLocaleString();
|
|
||||||
let isCurrency =
|
|
||||||
typeof _value === "object" && _value.type === "currency";
|
|
||||||
return (
|
|
||||||
<Flex
|
|
||||||
key={field}
|
|
||||||
row
|
|
||||||
fluid
|
|
||||||
css={{
|
|
||||||
justifyContent: "flex-end",
|
|
||||||
alignItems: "center",
|
|
||||||
mb: "$3",
|
|
||||||
pr: "1px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text muted css={{ mr: "$3" }}>
|
|
||||||
{field + (isCurrency ? " (XRP)" : "")}:{" "}
|
|
||||||
</Text>
|
|
||||||
<Input
|
|
||||||
value={value}
|
|
||||||
onChange={e =>
|
|
||||||
setTxFields({
|
|
||||||
...txFields,
|
|
||||||
[field]:
|
|
||||||
typeof _value === "object"
|
|
||||||
? { ..._value, value: e.target.value }
|
|
||||||
: e.target.value,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
css={{ width: "70%", flex: "inherit", height: "$9" }}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Flex>
|
|
||||||
</Container>
|
|
||||||
<Flex
|
|
||||||
row
|
|
||||||
css={{
|
|
||||||
justifyContent: "space-between",
|
|
||||||
position: "absolute",
|
|
||||||
left: 0,
|
|
||||||
bottom: 0,
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Button outline>VIEW AS JSON</Button>
|
|
||||||
<Flex row>
|
|
||||||
<Button onClick={resetState} outline css={{ mr: "$3" }}>
|
|
||||||
RESET
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={submitTest}
|
|
||||||
isLoading={txIsLoading}
|
|
||||||
disabled={txIsDisabled}
|
|
||||||
>
|
|
||||||
<Play weight="bold" size="16px" />
|
|
||||||
RUN TEST
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const Test = () => {
|
const Test = () => {
|
||||||
const { transactionLogs } = useSnapshot(state);
|
const { transactionLogs } = useSnapshot(state);
|
||||||
const [tabHeaders, setTabHeaders] = useState<string[]>(["test1.json"]);
|
const { transactions } = useSnapshot(testState);
|
||||||
|
console.log("Test");
|
||||||
return (
|
return (
|
||||||
<Container css={{ px: 0 }}>
|
<Container css={{ px: 0 }}>
|
||||||
<Split
|
<Split
|
||||||
@@ -417,14 +114,19 @@ const Test = () => {
|
|||||||
keepAllAlive
|
keepAllAlive
|
||||||
forceDefaultExtension
|
forceDefaultExtension
|
||||||
defaultExtension=".json"
|
defaultExtension=".json"
|
||||||
onCreateNewTab={name => setTabHeaders(tabHeaders.concat(name))}
|
onCreateNewTab={header => modifyTransaction(header, {})}
|
||||||
onCloseTab={index =>
|
onCloseTab={
|
||||||
setTabHeaders(tabHeaders.filter((_, idx) => idx !== index))
|
(idx, header) =>
|
||||||
|
header && modifyTransaction(header, undefined) // TODO header should be a required field
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{tabHeaders.map(header => (
|
{transactions.map(({ header, state }) => (
|
||||||
<Tab key={header} header={header}>
|
<Tab key={header} header={header}>
|
||||||
<Transaction header={header} />
|
<Transaction
|
||||||
|
state={state}
|
||||||
|
header={header}
|
||||||
|
setState={pTx => modifyTransaction(header, pTx)}
|
||||||
|
/>
|
||||||
</Tab>
|
</Tab>
|
||||||
))}
|
))}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
24
utils/object.ts
Normal file
24
utils/object.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
export const deepEqual = (object1: any, object2: any) => {
|
||||||
|
if (!isObject(object1) || !isObject(object2)) return object1 === object2
|
||||||
|
|
||||||
|
const keys1 = Object.keys(object1);
|
||||||
|
const keys2 = Object.keys(object2);
|
||||||
|
if (keys1.length !== keys2.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
for (const key of keys1) {
|
||||||
|
const val1 = object1[key];
|
||||||
|
const val2 = object2[key];
|
||||||
|
const areObjects = isObject(val1) && isObject(val2);
|
||||||
|
if (
|
||||||
|
areObjects && !deepEqual(val1, val2) ||
|
||||||
|
!areObjects && val1 !== val2
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
export const isObject = (object: any) => {
|
||||||
|
return object != null && typeof object === 'object';
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user