# Aragon Transaction Path Visualization & Signing Tool 🛤

The current implementation of Aragon connect uses a Breadth-first search algorithm to search the shortest path. But other paths will not be considered. This can even miss the shortest path in some cases.

In our path visualizer tool, we created a User Interface that shows all the possible paths for an Aragon Transaction but it only supports the Finance app function to execute New Immediate Payment. This tool helps to send the transaction on the correct path which saves gas cost and improves UX. This is what the tool looks now:



#### Application Demo Link:
https://princesinha19.github.io/aragon-path-finder/

## Prposal Information

In this proposal, we would like to demonstrate the feasibility to make path visualization tools available for naive users also.

**Key features which we would like to provide:-**
* Support for both Mainnet and Rinkeby Testnet.
* React components that can be easily integrated with a web application.
* An open-source web application through which users can visualize the path and send the transaction.
* Simple and intuitive user interface.
* We would like to support all the available functions of all the apps within an organization.
* Direct transaction signing from the interface using metamask or any web3 wallet.

**System Flow:-**
1. Users will have to choose the network and, need to provide the ENS address of the organization. (Nothing else)
1. First, the system will display all the available applications in the organization. Then the user will have to choose one application.
1. Then, the system will ask the user to provide the inputs for the selected function in the application.
1. The path visualization system will also show different apps and it will ask the user to choose multiple apps through which the transaction should be executed. The user can also skip this option, in that case, all the possible paths will be searched.
1. The system will search for all the possible paths for that transaction. We will provide a filter to get the shortest, longest, etc from all paths.
1. The user can choose any desired path to send the transaction using metamask.

**Benefits:-**
* Better UX. The user only has to provide an ENS address.
* Saves on the gas cost.

In the hackathon, we have modified the Aragon connects backend code to show multiple paths for a transaction. We also created a simple web application for visualization of all paths. In the current implementation, the backend doesn’t support the users to choose custom paths through which the transaction should be executed. So, we would like to add support for all the options.

The code will be open source and it will be in the form of the NPM library. One can use the react component to include path visualization and transaction signing in their own application with a custom user interface. The web application UI will be based on current Aragon UI and will be intuitive so that a naive user can also use it.

**Deliverables:-**
* An intuitive web application for path visualization and transaction signing.
* An NPM library with custom components.
* Developer documentation for using the React component.

**Hack For Freedom Submission Link:**
https://hackmd.io/@_wX3kvKBSEqDWL7fPEfXFw/HyYzOmYxP

**Funding Information:**
We would like to request 600 ANT for now to complete all the features. In future we will request 500 more ANT's for better UI/UX design and for other things like documentation etc.