ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

json schema

Browse Source
This commit is contained in:
muzam1l
2022-05-05 20:00:10 +05:30
parent 386619619b
commit 866f6257f1
7 changed files with 232 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
components/Transaction/json.tsx
View File

@@ -1,15 +1,22 @@
import Editor, { loader } from "@monaco-editor/react";
import { FC, useEffect, useState } from "react";
import Editor, { loader, useMonaco } from "@monaco-editor/react";
import { FC, useCallback, useEffect, useState } from "react";
import { useTheme } from "next-themes";
import dark from "../../theme/editor/amy.json";
import light from "../../theme/editor/xcode_default.json";
import { useSnapshot } from "valtio";
import state, { parseJSON, prepareState, TransactionState } from "../../state";
import state, {
prepareState,
transactionsData,
TransactionState,
} from "../../state";
import Text from "../Text";
import Flex from "../Flex";
import { Link } from "..";
import { showAlert } from "../../state/actions/showAlert";
import { parseJSON } from "../../utils/json";
import { extractSchemaProps } from "../../utils/schema";
import amountSchema from "../../content/amount-schema.json";
loader.config({
paths: {
@@ -30,8 +37,8 @@ export const TxJson: FC<JsonProps> = ({
header,
setState,
}) => {
const { editorSettings } = useSnapshot(state);
const { editorValue = value } = txState;
const { editorSettings, accounts } = useSnapshot(state);
const { editorValue = value, selectedTransaction } = txState;
const { theme } = useTheme();
const [hasUnsaved, setHasUnsaved] = useState(false);
@@ -73,6 +80,82 @@ export const TxJson: FC<JsonProps> = ({
};
const path = `file:///${header}`;
const monaco = useMonaco();
const getSchemas = useCallback((): any[] => {
const tt = selectedTransaction?.value;
const txObj = transactionsData.find(td => td.TransactionType === tt);
let genericSchemaProps: any;
if (txObj) {
genericSchemaProps = extractSchemaProps(txObj);
} else {
genericSchemaProps = transactionsData.reduce(
(cumm, td) => ({
...cumm,
...extractSchemaProps(td),
}),
{}
);
}
return [
{
uri: "file:///main-schema.json", // id of the first schema
fileMatch: ["**.json"], // associate with our model
schema: {
title: header,
type: "object",
required: ["TransactionType", "Account"],
properties: {
...genericSchemaProps,
TransactionType: {
title: "Transaction Type",
enum: transactionsData.map(td => td.TransactionType),
},
Account: {
$ref: "file:///account-schema.json",
},
Destination: {
anyOf: [
{
$ref: "file:///account-schema.json",
},
{
type: "string",
title: "Destination Account",
},
],
},
Amount: {
$ref: "file:///amount-schema.json",
},
},
},
},
{
uri: "file:///account-schema.json",
schema: {
type: "string",
title: "Account type",
enum: accounts.map(acc => acc.address),
},
},
{
...amountSchema,
},
];
}, [accounts, header, selectedTransaction?.value]);
useEffect(() => {
if (!monaco) return;
console.log("monaco render");
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: getSchemas(),
});
}, [getSchemas, monaco]);
return (
<Flex
fluid
@@ -98,8 +181,16 @@ export const TxJson: FC<JsonProps> = ({
dragAndDrop: true,
fontSize: 14,
});
// register onExit cb
const model = editor.getModel();
model?.onWillDispose(() => onExit(model.getValue()));
// set json defaults
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
schemas: getSchemas(),
});
}}
theme={theme === "dark" ? "dark" : "light"}
/>

10
components/Transaction/ui.tsx
View File

@@ -164,16 +164,16 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
let value: string | undefined;
if (typeof _value === "object") {
if (_value.type === "json" && typeof _value.value === "object") {
value = JSON.stringify(_value.value);
if (_value.$type === "json" && typeof _value.$value === "object") {
value = JSON.stringify(_value.$value);
} else {
value = _value.value.toString();
value = _value.$value.toString();
}
} else {
value = _value?.toString();
}
let isXrp = typeof _value === "object" && _value.type === "xrp";
let isXrp = typeof _value === "object" && _value.$type === "xrp";
return (
<Flex
key={field}
@@ -197,7 +197,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState }) => {
...txFields,
[field]:
typeof _value === "object"
? { ..._value, value: e.target.value }
? { ..._value, $value: e.target.value }
: e.target.value,
},
});

50
content/amount-schema.json Normal file
View File

@@ -0,0 +1,50 @@
{
"uri": "file:///amount-schema.json",
"title": "Amount",
"description": "Specify xrp in drops and tokens as objects.",
"schema": {
"anyOf": [
{
"type": [
"number",
"string"
],
"exclusiveMinimum": 0,
"maximum": "100000000000000000"
},
{
"type": "object",
"properties": {
"currency": {
"description": "Arbitrary currency code for the token. Cannot be XRP."
},
"value": {
"type": [
"string",
"number"
],
"description": "Quoted decimal representation of the amount of the token."
},
"issuer": {
"type": "string",
"description": "Generally, the account that issues this token. In special cases, this can refer to the account that holds the token instead."
}
}
}
],
"defaultSnippets": [
{
"label": "Xrp",
"body": "1000000"
},
{
"label": "Token",
"body": {
"currency": "${1:13.1}",
"value": "${2:FOO}",
"description": "${3:rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpns}"
}
}
]
}
}

36
content/transactions.json
View File

@@ -27,8 +27,8 @@
"Account": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
"TransactionType": "CheckCash",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
"Fee": "12"
@@ -61,8 +61,8 @@
"Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
"TransactionType": "EscrowCreate",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
"CancelAfter": 533257958,
@@ -99,8 +99,8 @@
"Account": "rs8jBmmfpwgmrSPgwMsh7CvKRmRt1JTVSX",
"TokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"Flags": 1
},
@@ -122,8 +122,8 @@
"Sequence": 8,
"TakerGets": "6000000",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
}
},
{
@@ -131,8 +131,8 @@
"Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
"Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"Fee": "12",
"Flags": 2147483648,
@@ -142,8 +142,8 @@
"Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
"TransactionType": "PaymentChannelCreate",
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
"SettleDelay": 86400,
@@ -157,8 +157,8 @@
"TransactionType": "PaymentChannelFund",
"Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
"Amount": {
"value": "200",
"type": "xrp"
"$value": "200",
"$type": "xrp"
},
"Expiration": 543171558
},
@@ -176,8 +176,8 @@
"Fee": "12",
"SignerQuorum": 3,
"SignerEntries": {
"type": "json",
"value": [
"$type": "json",
"$value": [
{
"SignerEntry": {
"Account": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
@@ -213,8 +213,8 @@
"Flags": 262144,
"LastLedgerSequence": 8007750,
"Amount": {
"value": "100",
"type": "xrp"
"$value": "100",
"$type": "xrp"
},
"Sequence": 12
}

37
state/transactions.ts
View File

@@ -3,6 +3,7 @@ import { deepEqual } from '../utils/object';
import transactionsData from "../content/transactions.json";
import state from '.';
import { showAlert } from "../state/actions/showAlert";
import { parseJSON } from '../utils/json';
export type SelectOption = {
value: string;
@@ -106,25 +107,25 @@ export const prepareTransaction = (data: any) => {
(Object.keys(options)).forEach(field => {
let _value = options[field];
// convert xrp
if (_value && typeof _value === "object" && _value.type === "xrp") {
if (+_value.value) {
options[field] = (+_value.value * 1000000 + "") as any;
if (_value && typeof _value === "object" && _value.$type === "xrp") {
if (+_value.$value) {
options[field] = (+_value.$value * 1000000 + "") as any;
} else {
options[field] = undefined; // 👇 💀
}
}
// handle type: `json`
if (_value && typeof _value === "object" && _value.type === "json") {
if (typeof _value.value === "object") {
options[field] = _value.value as any;
if (_value && 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);
options[field] = JSON.parse(_value.$value);
} catch (error) {
const message = `Input error for json field '${field}': ${error instanceof Error ? error.message : ""
}`;
console.error(message)
options[field] = _value.value
options[field] = _value.$value
}
}
}
@@ -201,16 +202,16 @@ export const prepareState = (value: string, txState: TransactionState) => {
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 isXrp = typeof value !== 'object' && origValue && typeof origValue === 'object' && origValue.$type === 'xrp'
if (isXrp) {
rest[field] = {
type: "xrp",
value: +value / 1000000, // TODO maybe use bigint?
$type: "xrp",
$value: +value / 1000000, // TODO maybe use bigint?
};
} else if (typeof value === "object") {
rest[field] = {
type: "json",
value,
$type: "json",
$value: value,
};
}
});
@@ -221,14 +222,4 @@ export const prepareState = (value: string, txState: TransactionState) => {
return tx
}
export const parseJSON = (str?: string | null): any | undefined => {
if (!str) return undefined
try {
const parsed = JSON.parse(str);
return typeof parsed === "object" ? parsed : undefined;
} catch (error) {
return undefined;
}
}
export { transactionsData }

10
utils/json.ts
View File

@@ -19,3 +19,13 @@ export const extractJSON = (str?: string) => {
firstOpen = str.indexOf('{', firstOpen + 1);
} while (firstOpen != -1);
}
export const parseJSON = (str?: string | null): any | undefined => {
if (!str) return undefined
try {
const parsed = JSON.parse(str);
return typeof parsed === "object" ? parsed : undefined;
} catch (error) {
return undefined;
}
}

39
utils/schema.ts Normal file
View File

@@ -0,0 +1,39 @@
export const extractSchemaProps = <O extends object>(obj: O) =>
Object.entries(obj).reduce((prev, [key, val]) => {
const typeOf = <T>(arg: T) =>
arg instanceof Array
? "array"
: arg === null
? "undefined"
: typeof arg;
const value = (typeOf(val) === "object" && '$type' in val && '$value' in val) ? val?.$value : val;
const type = typeOf(value);
let schema: any = {
title: key,
type,
default: value,
}
if (typeOf(value) === 'array') {
const item = value[0] // TODO merge other item schema's into one
if (typeOf(item) !== 'object') {
schema.items = {
type: 'object',
properties: extractSchemaProps(item),
default: item
}
}
// TODO support primitive-value arrays
}
if (typeOf(value) === "object") {
schema.properties = extractSchemaProps(value)
}
return {
...prev,
[key]: schema,
};
}, {} as any);