@ertravi/txio-view-react v0.0.32

ertravi = Ergo Transactions Visuals

This is an alpha version!

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

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 (
    <TxioStoreProvider  config={TxioViewConfig}>
      <ReactFlowProvider>
        <Component {...pageProps} // eslint-disable-line
        />
      </ReactFlowProvider>
    </TxioStoreProvider>
  );
}

• pages\index.tsx (extracts)

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

...

const Buttons = ({ setTxData }) => {
  const [withDagreLayout, toogleWithDagreLayout] = useToggleDagreLayout();
  return (
    <>
      {demos.map(({ title, data }) => (
        <button onClick={() => setTxData(data as any)}
          ...
        >
          {title}
        </button>
      ))}
      <button onClick={() => (toogleWithDagreLayout as () => void)()}
        ...
      >
        {withDagreLayout ? "No Dagre Layout" : "Use Dagre Layout"}
      </button>
    </>
  );
};

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

  return (
    ...
    <Buttons {...{ setTxData }} />
    <TxDiagram width={800} height={800} data={txData} />
    ...
  );
};

Configuration

Chakra

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:

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 (
    <ChakraProvider theme={theme}>
      <TxioStoreProvider config={TxioViewConfig}>
        <ReactFlowProvider>
          <Component {...pageProps} // eslint-disable-line
          />
        </ReactFlowProvider>
      </TxioStoreProvider>
    </ChakraProvider>
  );
}

rootPropsToShow

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:

[
  "value", 
  "boxId", 
  "address"
]

boxColors

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:

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

The default is:

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