aphd/paso

PASO (PArser for SOlidity)

An online Parser for Solidity language Analysis

Requires Node >= v11.3.0

Usage

Web tool

https://aphd.github.io/paso/

https://github.com/aphd/paso/settings/pages

Website deployment

npm install
npm start

CLI tool

node --experimental-modules src/services/client.mjs --d=src/fixtures/smart-contracts/ --o /tmp/metrics.csv

Data analysis

cd src/fixtures
python

import pandas as pd
df = pd.read_csv('src/fixtures/metrics.csv', \
    parse_dates=['submission_date'],  index_col='submission_date')
df[['mapping', 'total_lines', 'interfaces', 'libraries']] \
    .resample('Y').mean() \
    .transform(lambda x: x/x.max())

import pandas as pd
import matplotlib.pyplot as plt
%matplotlib inline
import pylab as plot

df = pd.read_csv('src/fixtures/metrics.csv', \
    parse_dates=['submission_date'],  index_col='submission_date')
df.index = df.index.strftime('%Y')
df = df.loc[df.index > '2015']
ax = df[['interfaces', 'libraries', 'contracts']] \
    .groupby(df.index).mean() \
    .plot(kind = 'bar', figsize=(40,20)) 
for p in ax.patches:
    ax.annotate(str(round(p.get_height(),2)), (p.get_x() * 1.005, p.get_height() * 1.005), fontsize=40)

import pandas as pd

df = pd.read_csv('src/fixtures/metrics.csv', \
    parse_dates=['submission_date'],  index_col='submission_date')

df.index = df.index.strftime('%Y')

df = df.loc[df.index > '2016']

df[['mapping', 'total_lines', 'interfaces', 'libraries', 'modifiers']] \
    .groupby(df.index).mean().apply(lambda x: x / max(x)) \
    .plot(kind = 'bar', figsize=(40,20)) 

import pandas as pd

df = pd.read_csv('src/fixtures/metrics.csv')

df.replace({'submission_date': r'^(201\d).*$'}, {'submission_date': r'\1'}, \
    regex=True, inplace=True )
df.loc[df.submission_date > '2016', \
    ['submission_date', 'mapping', 'total_lines', 'interfaces', 'libraries', 'modifiers']] \
    .groupby(df['submission_date']).mean() \
    .apply(lambda x: x / max(x)) \
    .plot(kind = 'bar', figsize=(40,20)) 

print(df.describe().transpose().round(1).to_latex())

Data analysis - plots

import pandas as pd
df = pd.read_csv('./metrics.csv')
udf = df.drop_duplicates(subset=['address'])
%matplotlib inline

udf[udf['version'].str.contains("0.5")==True]['functions'][udf['functions']<100].plot.kde()

df[df['version'].str.contains("0.4")==True].hist(column='functions', bins=20, range=(0, 100))

References

1. This project was bootstrapped with Create React App.
2. This project is using a solidity parser built on top of a ANTLR4 grammar.

paso's Issues

Optional chaining

You can manage two levels of undefined with the Optional chaining.

solidity-parser-diligence

This issus is related to the minify issue #18

https://www.npmjs.com/package/solidity-parser-diligence

facebook/create-react-app#7183 (comment)
reference: facebook/create-react-app#7183

minify

Yarn build causes solidity-parser-antlr to produce a fake tree.

I need to test the following solution:

1. minify

Accessing Nested SourceCode (Library)

An example of nested source code object is the smart contract available at this address 0x6fa85aa3f44f296de1294e3c097872235215b822.

plots for README.md

Getting metrics by contractAddress

Adding spinning icon when fetching contract

Reference: https://github.com/aphd/smac-corpus/issues/16

Source Code Visualization

Academic References

• Visualizing Software Systems as Cities (Wettel-Lanza-2007.pdf)
• A Solar System Metaphor for 3D Visualisation of Object Oriented Software Metrics (solar-system-metaphor.pdf)
• http://agilevisualization.com/AgileVisualization/Moose/0306-Moose.html
• Code Flows: Visualizing Structural Evolution of Source Code
• Visualizing Object-oriented Software for Understanding and Documentation

Company References

• https://www.imagix.com/appnotes/source-code-visualization.html

Open Source References

• https://github.com/naddison36/sol2uml
• http://www.redotheweb.com/CodeFlower/
• https://www.npmjs.com/package/arkit
• https://vanya.jp.net/vtree/
• https://github.com/leon-thomm/Ryven

Keywords

• Visualizing the code distribution
• Visualizing cross-cutting concerns

Notes

Application Examples
Getting a first overview: The programmer wants first to get a global overview of the code changes.
Figure XXX tells several things at a glance.
Checking design rules and find design violation
Discussion with a team member.
Visualizing events of interest

BibTeX

Bibtex reference. Many readers are from the academic World. In case you are using PASO for some of your work, you can find a BibTex entry online.

@INPROCEEDINGS{9050263,  
    author={G. {Antonio Pierro} and R. {Tonelli}},  
    booktitle={2020 IEEE International Workshop on Blockchain Oriented Software Engineering (IWBOSE)},  
    title={PASO: A Web-Based Parser for Solidity Language Analysis},   
    year={2020},  
    volume={},  
    number={},  
    pages={16-21},
}

Add link to https://ieeexplore.ieee.org/document/9050263

Automate Javascript minification

I need to automate Javascript minification, for now, yarn build performs "build": "rm -rf docs; react-scripts build && mv build docs"

For an unknown reason, react-scripts build fails while uglify-es is successful.

For now, the process to build the app is manual.

view-source:http://localhost:3000/
cd docs
wget *.js
../node_modules/uglify-es/bin/uglifyjs bundle.js 1.chunk.js main.chunk.js -o 1.js -c

Form.Control.Feedback render

Options available to build form feedback are:

1. https://getbootstrap.com/docs/4.4/components/forms/#server-side
2. Form libraries and server rendered styles.

JSON to tree diagram

** Visualizing Smart Contract Code through Abstract Syntax Tree Analysis **

References: https://github.com/ivan111/vtree

Adding analytics

The code to add is

import ReactGA from "react-ga";

...

        ReactGA.initialize("UA-155858412-1");
        ReactGA.pageview(window.location.pathname);

Spinning to compute metrics

References:

• make a test on a heavy calculation in js
• useContext and move handleFormSubmit from index.jsx to metric-form.
• https://github.com/aphd/smac-corpus/blob/master/src/components/cart.jsx

globalThis in sol-parser

The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments.

Nullish coalescing operator

0 || 42; // 42
0 ?? 42; // 0

Autocomplete

1. Awesomplete GitHub
2. Awesomplete Demo

building process

To fix the building process you need to remove Router

images for readme.md

react router

https://reacttraining.com/react-router/web/example/basic