@ertravi/txio-view-react

----

Table of content

- Features
- Getting started
- Example NextJS
- Configuration
- Chakra
- rootPropsToShow
- boxColors

----

Features

> The main focus of this repo is making tools to help understand the Ergo blockchain. As a starting point you'll find the txio-view-react which tries to map inputs to outputs in a visual appealing way usable within a React app.

As of now, with version v0.0.32, you could see sth. like this:


This means:
- address is restored from ergoTree
- amount of transfered value is added to the edges
- deep combinatory analysis
- spreads values over boxes until it finds a reasonable solution (least changes)
- drawbacks:
- can take some time if the no of boxes rises
- blocks UI while performing analysis
- configure boxColors and rootPropsToShow
- Auto-Layout could rearrange connected boxes
- ability to toggle between Auto-Layout and simple positioning
- related boxes (same value for ergoTree) share same color.
- ~~boxes with same boxId are connected by an arrow line~~
- ~~boxes which have same tokenId are connected by an arrow line~~

Getting started

To add it to your project run:

``
yarn add @ertravi/txio-view-react
`

Example NextJS

This example shows:

- the use of an optional config object to configure the visualisation

- pages\_app.tsx

`tsx
import React from "react";
import { TxioStoreProvider, ReactFlowProvider } from "@ertravi/txio-view-react";

// use an optional config
const TxioViewConfig = {
rootPropsToShow: [
"boxId",
"address",
"ergoTree",
"blockId",
"transactionId",
"value",
],
boxColors: [
"var(--chakra-colors-green-600)",
"var(--chakra-colors-blue-300)",
"var(--chakra-colors-red-300)",
]
};

export default function MyApp({ Component, pageProps }) {
return (


/>


);
}

`

- pages\index.tsx (extracts)

`tsx
...
import { TxDiagram, useToggleDagreLayout } from "@ertravi/txio-view-react";

...

const Buttons = ({ setTxData }) => {
const [withDagreLayout, toogleWithDagreLayout] = useToggleDagreLayout();
return (
<>
{demos.map(({ title, data }) => (
setTxData(data as any)}
...
>
{title}

))}
(toogleWithDagreLayout as () => void)()}
...
>
{withDagreLayout ? "No Dagre Layout" : "Use Dagre Layout"}


);
};

export default () => {
const [txData, setTxData] = useState(data4);

return (
...


...
);
};
`

Configuration

$3

If you use Chakra as your component library you may want to use Chakra Global Styles as well in order to style the address-link to Ergo-Explorer.

As an example for NextJS you might use the following approach in file _app.tsx:

`tsx
import React from "react";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { TxioStoreProvider, ReactFlowProvider } from "@ertravi/txio-view-react";

const theme = extendTheme({
styles: {
global: {
"html, body": {
color: "gray.600",
lineHeight: "tall",
},
a: {
color: "blue.500",
},
},
},
});

...

export default function MyApp({ Component, pageProps }) {
return (



/>



);
}
`

$3

A list of property names to show up in the root properties section.

> The order of the names is used for display order.

Choose from these possibilities:

- "address"
- "blockId"
- "boxId"
- "ergoTree"
- "transactionId"
- "value"

The default is:

`js
[
"value",
"boxId",
"address"
]
`

$3

boxColors is a list of Color values.

- use any string that can be used as a Color.
- use as many as you expect different values of ergoTree

You can even use Chakra's CSS Variables

Example:

`js
const TxioViewConfig = {
...
boxColors: [
"var(--chakra-colors-green-600)",
"LightCoral",
"#996600",
]
};
var(--chakra-colors-green-600)
`

The default is:

`js
[
"LightCoral",
"PaleGreen",
"SkyBlue",
"Khaki",
"NavajoWhite",
"MistyRose",
]
``